React 入門

% npm install react-router-dom ⏎

個別コメントについて詳細情報を1つのページとして表示するためのコンポーネントを作成します．このために src/components/ フォルダに CommentShowPage.tsx ファイルを作成します．ここでもファイル名の先頭と単語の先頭は大文字を利用するようにして下さい．Visual Studio Code ではファイルを作成したら先頭で「rafce」と入力して Tab を押すと次のとおり雛形が作成されます．（その他のエディタの場合は下のコードをコピーして利用して下さい．）

src/components/CommentShowPage.tsximport React from 'react'

const CommentShowPage = () => {
  return (
    <div>CommentShowPage</div>
  )
}

export default CommentShowPage

次にルーティングのためのファイルを作成します．特定のフォルダに作成しなければならないというルールは特にありませんが，今回は src/ フォルダの中に routers というフォルダを作成し，その中に routes.tsx ファイルを作成することにします．作成した routes.tsx には次の内容を入力します．

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/" element={<CommentShowPage />} />
  </Routes>
);

export default routes;

上の7行目では，URL にトップページ / が指定されたときに，CommentListPage コンポーネントを表示することを意味しています．また，8行目では URL に /show/ が指定されたときには CommentShowPage コンポーネントを表示することを意味しています．これらのコンポーネントが利用できるように，2行目，3行目でインポートしています．さらに12行目で routes をエクスポートしていることにも注意して下さい．

最後に，index.tsx を編集します．これまではアプリケーション起動時に CommentListPage コンポーネントを表示するように指定していましたが，ルーティング定義を利用できるように変更します．

src/index.tsximport React from 'react';
import ReactDOM from 'react-dom/client';
import { BrowserRouter } from 'react-router-dom';
import routes from './routers/routes';
import './index.css';
// import CommentListPage from './components/CommentListPage';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);
root.render(
  <React.StrictMode>
    {/* <CommentListPage /> */}
    <BrowserRouter>
      {routes}
    </BrowserRouter>
  </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

ブラウザで動作を確認します．http://localhost:3000/ はこれまで通りの結果になります．

ブラウザのアドレスに http://localhost:3000/show/ を指定します．すると，次の通り，CommentShowPage コンポーネント雛形のページが表示されました．

次のページからは一覧ページから詳細ページにリンクを作成し，詳細ページを作り込んでいきます．

目次に戻る