React Routerでのデータ追加

前回のレッスンでは、ローダーを準備し、 特定のルートからのデータをストアから アンロードしました。さて、私たちの アプリケーションを例に、新しい製品を 追加し、そのデータをストアに書き込む 方法を見てみましょう。

ファイル root.jsx を開き、 レイアウトに新しい製品を追加するための ボタンを nav の前に追加しましょう。 フォームタグで囲みます。また、このボタンと リストをもう一つのdivで #menu を 持たせて囲みます。レイアウトは次のように なります：

routes/root.jsxreturn (
  <div id="main">
    <div id="menu">
      <form method="post">
        <button type="submit">製品を追加</button>
      </form>
      {products.length ? (
      <nav>
        {products.map((product) => (
        <Link key={product.id} to={`products/${product.id}`}>
          {product.name ? product.name : <i>名前なし</i>}
        </Link>
        ))}
      </nav>
      ) : (
      <p>
        <i>製品がありません...</i>
      </p>
      )}
    </div>

    <div id="product">
      <Outlet />
    </div>
  </div>
);

開発者パネルの 'ネットワーク' タブを開き、私たちのボタンをクリック すると、サーバーへのエラーリクエストが 表示されます。React Routerを使用して、 再度クライアントサイドのルーティングを 活用し、サーバーへのリクエストを 排除します。

そのために、タグ form を React Routerのコンポーネント Form に変更しましょう。まず Form の インポートを追加します：

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

次に、コードスニペット内の form タグを置き換えます：

root.jsx<Form method="post">
  <button type="submit">製品を追加</button>
</Form>

アプリケーションをリロードし、もう一度 開発者パネルを確認してください。製品追加 ボタンをクリックしてみます - これでサーバー へのリクエストはなくなっています（エラーは 今のところ気にしないでください）。