React 入門

% npm install react-router-dom ⏎

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

src/components/CommentShowPage.js
import React from 'react'

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

export default CommentShowPage

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

src/routers/routes.js
import { 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/" element={<CommentShowPage />} />
    </Route>
  )
);

export default routes;

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

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

src/index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import { RouterProvider } from 'react-router-dom';
import routes from './routers/routes';
import './index.css';
// import CommentListPage from  './comments/CommentListPage';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    {/* <CommentListPage /> */}
    <RouterProvider router={routes} />
  </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 コンポーネント雛形のページが表示されました．

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

目次に戻る