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.tsx
import { 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.tsx
import 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 を取得することができました.