React 入門

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

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

コメントの詳細表示ページにコメント一覧ページへ戻るためのボタンを設置します．まず，適当な場所に <button> 要素を配置し，ボタンに onClick 属性を追加して関数名を指定します．

src/components/CommentShowPage.tsx（抜粋）
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 className="body">最終更新： {data.updated_at}</div>
    </article>
    <button
      onClick={handleBackClick}
    >コメント一覧へ戻る</button>
  </div>
)

上で指定した名前の関数を作成します．トップページに戻るようにします．

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

同時に上で利用した useNavigate をコード先頭でインポートします．

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

ボタンをクリックしたときにページを移動できることをブラウザで確認してください．コードの全体像も確認しておきます．

src/components/CommentShowPage.tsx
import React from 'react'
import { useState, useEffect } from 'react';
import { useParams, useNavigate } from 'react-router-dom';
import axios, { AxiosResponse } from 'axios';

interface CommentData {
  id: number;
  title: string;
  body: string;
  updated_at: string;
}

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

  const [data, setData] = useState<CommentData | null>(null);
  const url = `http://127.0.0.1:8000/comments/${commentId}/`;

  useEffect(() => {
    axios.get<CommentData>(url)
      .then((res: AxiosResponse<CommentData>) => setData(res.data))
      .catch(err => console.log(err.message));
  }, [url]);

  const navigate = useNavigate();
  const handleBackClick = () => {
    navigate('/');
  };

  if (data === null) {
    return (
      <div className="container">
        <h1>コメント</h1>
        <article>
        </article>
      </div>
    );
  }

  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 className="body">最終更新： {data.updated_at}</div>
      </article>
      <button
        onClick={handleBackClick}
      >コメント一覧へ戻る</button>
    </div>
  )
}

export default CommentShowPage

目次に戻る