React 入門

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

リンクの作成と useParams

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

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

コメントの一覧に表示されているタイトルをクリックしたら詳細ページへ遷移するようにリンクを設定します．

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

リンクが設定され /show/ というパスにリンクされるようになりました．

実際にはどのコメントのリンクをクリックしたのかという情報を取得しなければなりません．このためにはルーティングの定義を変更します．具体的には URL を /show/123/ のように変更して，コメントの id 情報をパラメータとして URL に含めるようにします．ここで，/show/:commentId のようにコロン (:) のあとにパラメータを指定していることに注意してください．

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

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

export default routes;

Link で渡す url の中に id をパラメータとして埋め込みます．このとき path の中にパラメータを埋め込むために，全体をバッククオート (` ... `) で囲っていることにも注意してください．バッククォートで囲った中で ${ parameter } として parameter の値を文字列の中に埋め込むことが可能です．

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

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

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

const CommentShowPage = () => {
  const params = useParams();
  return (
    <div>CommentShowPage : {params.commentId}</div>
  )
}

export default CommentShowPage

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

目次に戻る