React Routerでの別ルートへのリダイレクト
これで、商品編集時にフォームに入力されたデータは保存されますが、一つ注意点があります。データ保存後もフォームページに留まってしまい、商品ページに戻る必要があることです。このレッスンで学ぶリダイレクトが、これを実現するのに役立ちます。
ファイル edit.jsx を開き、ライブラリから redirect をインポートしましょう。
import { redirect } from 'react-router-dom';
次に、action 関数が 1 を返す代わりに、必要なルートへリダイレクトするように変更します。この場合、商品ページに戻る必要があります。
return redirect(`/products/${params.productId}`);
これで、保存ボタンをクリックすると、更新されたデータを持つ商品ページに戻ります。
新しい商品の追加についても全く同じことができます。おそらく、すぐにフォームを開いて記入できる方が便利でしょう。それではやってみましょう。
まず、ファイル root.jsx を開き、商品の追加がルートページで行われるため、redirect をインポートする必要があります。
import { redirect } from 'react-router-dom';
再度 action 関数を取り上げ、product を返す代わりに、編集ページへのリダイレクトを行います。
return redirect(`/products/${product.id}/edit`);
これも確認してみましょう。商品追加ボタンをクリックすると、その編集用フォームが表示されます。
過去のレッスンの課題で作成したアプリケーションを使用してください。このレッスンの内容を参考に、フォームページでデータ保存ボタンをクリックした後、学生ページへリダイレクトする機能を実装してください。
次に、メインページで学生リストへの追加ボタンをクリックした後、学生データ編集フォームページへのリダイレクトを実装してください。
