React 入門

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

コメント一覧へ戻るボタンの設置

コメントの詳細表示ページにコメント一覧ページへ戻るためのボタンを設置します．まず，適当な場所に <button> 要素を配置します．

src/components/CommentShowPage.js（抜粋）
return (
  <div className="container">
    <h1>コメント</h1>
    <article>
      <div>ID: {data.id}</div>
      <div className="title">Title: {data.title}</div>
      <div className="body">Body: {data.body}</div>
      <div>最終更新： {data.updated_at}</div>
    </article>
    <button>コメント一覧へ戻る</button>
  </div>
)

続いて，ボタンに onClick 属性を追加して関数名を指定します．

src/components/CommentShowPage.js（抜粋）
return (
  <div className="container">
    <h1>コメント</h1>
    <article>
      <div>ID: {data.id}</div>
      <div className="title">Title: {data.title}</div>
      <div className="body">Body: {data.body}</div>
      <div>最終更新： {data.updated_at}</div>
    </article>
    <button
      onClick={handleBackClick}
    >コメント一覧へ戻る</button>
  </div>
)

上で指定した名前の関数を作成します．まずはボタンのクリックでその関数が確実に呼び出されていることをブラウザのコンソールにログとして出力する機能だけを入れておきます．

src/components/CommentShowPage.js（抜粋）
const handleBackClick = () => {
  console.log("handleBackClick");
};

ボタンをクリックしたときにログに出力されることが確認できました．

ページの移動は useNavigate で実現できます．まずプログラムの先頭で useNavigate をインポートします．

src/components/CommentShowPage.js（抜粋）
import { useParams, useNavigate } from 'react-router-dom';

関数 handleBackClick の中でトップページ (/) へ戻る処理を書きます．

src/components/CommentShowPage.js（抜粋）
const navigate = useNavigate();
const handleBackClick = () => {
  // console.log("handleBackClick");
  navigate('/');
};

ボタンをクリックしたときにページを移動できることをブラウザで確認してください．

目次に戻る