React Routerでのデータ追加

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

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

return (
	<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 のインポートを追加します：

import { Form } from 'react-router-dom';

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

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

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

前回のレッスンの課題で作成したアプリケーションを使用してください。レッスンの資料を参考に、関数 Root のマークアップを修正し、 form タグ内に学生を追加するボタンを追加してください。ボタンをクリックしたときにサーバーへのリクエストが行われることを確認してください。

次に、タグ form をコンポーネント Form に置き換えてください。学生追加ボタンをクリックしたときにサーバーへのリクエストが送信されないことを確認してください。