Reduxでのブラウザにおける商品ページ

前回のレッスンでは、商品の個別ページを作成しました。 次に、何らかのボタンをクリックしたときにブラウザに そのページが表示されるようにする必要があります。

まず、表示されるアドレスを割り当てましょう。 ルートを定義するApp.jsxファイルを開き、 childrenにさらに子ルートを追加します （ProductPage.jsxのインポートを忘れないでください）。 パスと表示するコンポーネントを指定します：

App.jsx{
  path: '/products/:productId',
  element: <ProductPage />,
},

次に、productsフォルダ内のProductsList.jsxを開き、 dispProductsのコードを少し変更します。 各商品の完全な情報を持つ個別ページができたので、 商品リストでは商品名と短縮された説明文のみを表示します。 また、ルーターライブラリのナビゲーション要素であるLinkをリンクとして追加し、 クリックすると商品ページに移動できるようにします。 さらに、商品を区切るためにdivにクラスproduct-excerptを追加します。 これでdispProductsのコードは次のようになります：

products/ProductsList.jsxconst dispProducts = products.map((product) => (
  <div key={product.id} className="product-excerpt">
    <h3>{product.name}</h3>
    <p>{product.desc.substring(0, 100)}</p>
    <Link to={`/products/${product.id}`} className="link-btn">
      view
    </Link>
  </div>
))

Linkをインポートします：

products/ProductsList.jsximport { Link } from 'react-router-dom'

そして、index.cssでクラスlink-btnと product-excerptのスタイルを追加します：

index.css.product-excerpt {
  margin-top: 30px;
  border: 1px solid gray;
  border-radius: 5px;
  padding: 10px;
}

.link-btn {
  border: 1.5px solid gray;
  border-radius: 10px;
  background-color: coral;
  color: black;
  padding: 1px 12px 1px 12px;
}

最後に、左メニューにある商品リストページへのリンクを 機能させ、他の場所からもアクセスできるようにしましょう。 そのためにroot.jsxを開き、このコード行を置き換えます：

app/root.jsx<a>Products</a>

次のように：

app/root.jsx<NavLink to="/products" end>
  Products
</NavLink>

React RouterライブラリからNavLinkを インポートするのも忘れないでください：

app/root.jsximport { Outlet, NavLink } from 'react-router-dom'

アプリケーションを起動しましょう。 これで、表示ボタンをクリックすることで 任意の商品の情報ページに移動できます。 新しい商品を追加し、個別ページの表示ボタンをクリックして その情報を確認してみてください。 また、商品リストに戻るには、左メニューの 'Products'をクリックするだけで十分です。 異なるページにいるときに、 ブラウザのアドレスバーのURLがどのように変化するかを 確認してください。