Redirect ke Rute Lain di React Router
Sekarang data yang dimasukkan ke dalam formulir saat mengedit produk telah disimpan, tetapi ada satu TETAPI - setelah penyimpanan data, kita tetap berada di halaman dengan formulir, sedangkan kita harus kembali ke halaman produk. Dalam hal ini, redirect akan membantu kita, yang akan kita pelajari dalam pelajaran ini.
Mari buka file edit.jsx
dan impor redirect dari
pustaka:
import { redirect } from 'react-router-dom';
Kemudian buat agar fungsi
action sekarang mengembalikan
bukan 1, tetapi mengalihkan kita
ke rute yang diperlukan. Dalam hal ini
kita perlu kembali ke
halaman produk:
return redirect(`/products/${params.productId}`);
Sekarang, dengan menekan tombol simpan, kita kembali ke halaman produk dengan data yang diperbarui.
Kita dapat melakukan hal yang sama untuk menambahkan produk baru, karena mungkin akan lebih mudah untuk langsung masuk ke formulir dan mengisinya. Mari kita lakukan demikian.
Pertama-tama, kita sekarang perlu membuka
file root.jsx dan mengimpor
redirect, karena penambahan
produk terjadi di halaman root:
import { redirect } from 'react-router-dom';
Ambil lagi fungsi action dan
sekarang kembalikan bukan product,
tetapi lakukan redirect ke halaman
edit:
return redirect(`/products/${product.id}/edit`);
Mari kita periksa ini juga. Klik tombol tambah produk sekarang dan kita akan melihat formulir untuk mengeditnya
Ambil aplikasi yang Anda buat di tugas untuk pelajaran sebelumnya. Dengan menggunakan materi pelajaran, implementasikan redirect ke halaman siswa setelah menekan tombol simpan data di halaman dengan formulir.
Dan sekarang implementasikan redirect dari halaman utama ke halaman dengan formulir edit data siswa setelah mengklik tombol tambah siswa ke dalam daftar.
