Lencong ke Laluan Lain dalam React Router
Kini data yang dimasukkan ke dalam borang semasa mengedit produk telah disimpan, tetapi ada SATU PERKARA - selepas menyimpan data, kita masih kekal di halaman dengan borang, sedangkan kita perlu kembali ke halaman produk. Pengalihan (redirect) akan membantu kami dalam hal ini, yang akan kami pelajari dalam pelajaran ini.
Mari buka fail edit.jsx
dan import redirect dari
perpustakaan:
import { redirect } from 'react-router-dom';
Kemudian buat supaya fungsi
action kini mengembalikan
bukan 1, tetapi mengalihkan kami
ke laluan yang dikehendaki. Dalam kes ini,
kita perlu kembali ke
halaman produk:
return redirect(`/products/${params.productId}`);
Sekarang, dengan menekan butang simpan, kami kembali ke halaman produk dengan data yang dikemas kini.
Kita boleh melakukan perkara yang sama untuk menambah produk baru, kerana mungkin lebih mudah untuk terus pergi ke borang dan mengisinya. Mari kita lakukan begitu.
Pertama, kita kini perlu membuka
fail root.jsx dan import
redirect, memandangkan penambahan
produk berlaku pada halaman akar:
import { redirect } from 'react-router-dom';
Ambil sekali lagi fungsi action dan
kini akan mengembalikan bukan product,
tetapi melakukan pengalihan ke halaman
pengeditan:
return redirect(`/products/${product.id}/edit`);
Mari kita uji ini juga. Klik sekarang pada butang menambah produk dan kita akan melihat borang untuk mengeditnya.
Ambil aplikasi yang anda buat dalam tugasan untuk pelajaran lepas. Dengan menggunakan bahan pelajaran, laksanakan pengalihan ke halaman pelajar selepas menekan butang simpan data pada halaman dengan borang.
Dan sekarang laksanakan pengalihan dari halaman utama ke halaman dengan borang mengedit data pelajar selepas klik pada butang menambah pelajar ke dalam senarai.
