React Routerにおけるネストされたルート

このレッスンでは、ネストされたルートについて学びます。前回のレッスンで作成したアプリケーションを起動してください。リンクをクリックすると、商品の個別ページに移動します。 しかし、この表示方法が不便で、商品一覧と商品ページを一目で確認できるように、同じ画面に並べて表示したいと仮定しましょう。それでは、そのように変更してみます。

そのために、main.jsxファイルを開き、商品ページのルートをルートルートの子ルートにする、つまりルートルートに「ネスト」します。 これには、ルートオブジェクトのもう一つのプロパティであるchildrenを使用します。

main.jsxconst router = createBrowserRouter([
  {
    path: '/',
    element: <Root />,
    errorElement: <ErrorPage404 />,
    children: [
      {
        path: 'products/:productId',
        element: <Product />,
      },
    ],
  },

]);

再度リンクをクリックしてみますが、商品一覧の右側には何も表示されません。これは、親ルートに子ルートをどこにレンダリングしたいかを指示していないためです。

親ルート内で子ルートの要素をレンダリングするために、Outletコンポーネントが役立ちます。ライブラリからインポートして、ルートルート用のファイルに追加しましょう。

routes/root.jsximport { Outlet } from 'react-router-dom';

次に、#productというdivで囲み、ルートルートのレイアウトのnav閉じタグの後に追加します。さらに、この構造全体を#mainという別のdivで囲みます。

routes/root.jsxreturn (
  <div id="main">
    <nav>
      <a href={`/products/1`}>Product1</a>
      <a href={`/products/2`}>Product2</a>
    </nav>
    <div id="product">
      <Outlet />
    </div>
  </div>
);

これでリンクをクリックすると、商品一覧と商品ページの両方が表示されるようになります。

次に、index.cssに少しスタイルを追加しましょう。

index.cssh1, h2 {
  margin: 0;
}

div#main {
  display: flex;
  margin: 20px;
}

div#product {
  margin-left: 40px;
}