Chuyển hướng đến route khác trong React Router

Bây giờ, dữ liệu nhập vào form khi chỉnh sửa sản phẩm đã được lưu lại, nhưng có một NHƯNG - sau khi lưu dữ liệu, chúng ta vẫn ở lại trang có form, trong khi chúng ta cần quay lại trang sản phẩm. Chuyển hướng sẽ giúp chúng ta trong việc này, và chúng ta sẽ làm quen với nó trong bài học này.

Hãy mở tệp edit.jsx và nhập khẩu redirect từ thư viện:

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

Và sau đó làm sao để hàm action bây giờ trả về không phải 1, mà chuyển hướng chúng ta đến route cần thiết. Trong trường hợp này chúng ta cần quay lại trang sản phẩm:

return redirect(`/products/${params.productId}`);

Bây giờ, khi nhấn nút lưu, chúng ta sẽ quay lại trang sản phẩm với dữ liệu đã được cập nhật.

Chúng ta có thể làm tương tự cho việc thêm sản phẩm mới, bởi vì có lẽ sẽ tiện hơn nếu ngay lập tức đi đến form và điền nó. Hãy làm như vậy.

Đầu tiên, bây giờ chúng ta cần mở tệp root.jsx và nhập khẩu redirect, vì việc thêm sản phẩm diễn ra trên trang gốc:

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

Lấy lại hàm action và bây giờ sẽ trả về không phải product, mà thực hiện chuyển hướng đến trang chỉnh sửa:

return redirect(`/products/${product.id}/edit`);

Hãy kiểm tra điều này. Bây giờ hãy nhấp vào nút thêm sản phẩm và sẽ thấy form để chỉnh sửa nó.

Hãy lấy ứng dụng mà bạn đã tạo trong các bài tập của những bài học trước. Sử dụng tài liệu của bài học, hãy triển khai trong đó chuyển hướng đến trang sinh viên sau khi nhấn nút lưu dữ liệu trên trang có form.

Và bây giờ hãy triển khai chuyển hướng từ trang chủ đến trang có form chỉnh sửa dữ liệu sinh viên sau khi nhấp vào nút thêm sinh viên vào danh sách.