React 入門

TypeScript コメント掲示板アプリの開発

リンクの作成と useParams

ここでは，コメント一覧ページから詳細表示ページにリンクを作成します．React でルーティングを利用したリンクを作成するには Link コンポーネントを利用します．コメント一覧ページの中でコメント情報は Comment コンポーネントで表示しているので，まず，Comment.tsx の先頭で Link コンポーネントをインポートします．

src/components/Comment.tsx（抜粋）import { Link } from 'react-router-dom';

コメントの一覧に表示されているタイトルをクリックしたら URL にコメントのIDも含めた詳細ページへ遷移するようにリンクを設定します．例えば，コメントのIDが 13 であれば URL は /show/13/ のように Link で渡す url の中に id をパラメータとして埋め込みます．このとき path の中にパラメータを埋め込むために，全体をバッククオート (` ... `) で囲っていることにも注意してください．バッククォートで囲った中で ${ parameter } として parameter の値を文字列の中に埋め込むことが可能です．

src/components/Comment.tsx（抜粋）<div className="title">
  <Link to={`/show/${props.comment.id}/`}>
    {props.comment.title}
  </Link>
</div>

ルーティングの定義を変更します．具体的には URL を /show/13/ のように変更して，コメントの id 情報をパラメータとして URL に含めるようにします．ここで，/show/:commentId のようにコロン (:) のあとにパラメータを指定していることに注意してください．

src/routers/routes.tsximport { Route, Routes } from 'react-router-dom';
import CommentListPage from '../components/CommentListPage';
import CommentShowPage from '../components/CommentShowPage';

const routes = (
  <Routes>
    <Route path="/" element={<CommentListPage />} />
    <Route path="/show/:commentId" element={<CommentShowPage />} />
  </Routes>
);

export default routes;

url に埋め込まれた id の情報は CommentShowPage.tsx で受け取ることができます．このために useParams を利用します．

src/components/CommentShowPage.tsximport React from 'react'
import { useParams } from 'react-router-dom';

const CommentShowPage: React.FC = () => {
  const {commentId} = useParams<{commentId: string}>();

  return (
    <div>CommentShowPage: {commentId}</div>
  )
}

export default CommentShowPage

ブラウザで一覧ページからタイトルをクリックすると，クリックしたコメントの id を取得することができました．

目次に戻る