React Routerへの別のルートの追加

ホームページへのルートルートがあり、 そこには製品へのリンクがあります。 では次に、もう1つのルートを追加して、 リンクの1つをクリックしたときにエラー画面ではなく 製品ページが表示されるようにしましょう。

まず、前回のレッスンで作成したアプリケーションを開き、 フォルダ routes にファイル product.jsx を作成します。 その中にコンポーネント Product を作りましょう：

routes/product.jsxfunction Product() {}

export default Product;

次に、Product 内にプロパティ name、 cost、amount を持つ オブジェクト product を作成します。 今のところ、これらはいくつかの固定値です：

routes/product.jsxfunction Product() {
  const product = {
    name: '製品',
    cost: 400,
    amount: 5,
  };
}

export default Product;

そして、製品ページでは、それに応じて 製品名、コスト、数量を表示します：

routes/product.jsxreturn (
  <div>
    <h2>製品ページ</h2>
    <p>名前： {product.name}</p>
    <p>コスト： {product.cost}</p>
    <p>数量： {product.amount}</p>
  </div>
);

コンポーネント Product を ファイル main.jsx に必ずインポートしましょう：

main.jsximport Product from './routes/product';

最後に、アプリケーションにもう1つのルートを追加します。 ルートルートの直後に作成します。パスとして 'products/:productId' を指定し、 表示する要素としてコンポーネント Product を使用します：

main.jsx{
  path: '/',
  element: <Root />,
  errorElement: <ErrorPage404 />,
},
{
  path: 'products/:productId',
  element: <Product />,
},

では、アプリケーションを起動し、 リンクをクリックして製品ページに移動してみましょう （現時点ではすべてのリンクで同じページですが）、 エラーページではなくなっているはずです。