Đã giải quyết: chuyển hướng với bộ định tuyến phản ứng v6

Vấn đề chính liên quan đến chuyển hướng với React Router v6 là thành phần này không kết xuất lại khi chuyển hướng xảy ra. Điều này có nghĩa là bất kỳ trạng thái hoặc đạo cụ nào được liên kết với thành phần sẽ không được cập nhật khi chuyển hướng xảy ra và mọi thay đổi được thực hiện đối với các giá trị đó sẽ không được phản ánh trong trang mới. Ngoài ra, vì React Router v6 không hỗ trợ chuỗi truy vấn nên mọi tham số truy vấn được truyền trong URL cũng sẽ bị mất trong quá trình chuyển hướng.

import { Redirect } from "react-router-dom";

<Redirect to="/home" />

1. Dòng này nhập thành phần Chuyển hướng từ thư viện Reac-router-dom.

2. Dòng này hiển thị một thành phần Chuyển hướng, thành phần này sẽ chuyển hướng người dùng đến tuyến đường “/home”.

Làm cách nào tôi có thể chuyển hướng trong React Router v6

v6

React Router v6 cung cấp một thành phần mới gọi là có thể được sử dụng để chuyển hướng người dùng từ trang này sang trang khác. Để sử dụng nó, bạn chỉ cần nhập thành phần Redirect từ gói react-router-dom và sau đó sử dụng nó trong cấu hình tuyến đường của mình. Khi người dùng truy cập đường dẫn được chỉ định trong chỗ dựa 'từ', họ sẽ được chuyển hướng đến đường dẫn được chỉ định trong chỗ dựa 'đến'. Ví dụ:

nhập {Chuyển hướng} từ 'Reac-router-dom';
} />

Làm cách nào để chuyển hướng trong bộ định tuyến phản ứng v6 sau khi đăng nhập

Chuyển hướng sau khi đăng nhập thành công là một tính năng phổ biến trong các ứng dụng web. Trong React Router v6, bạn có thể sử dụng thành phần để chuyển hướng người dùng sau khi đăng nhập thành công.

Để làm điều này, bạn sẽ cần tạo một tuyến đường để kiểm tra xem người dùng đã đăng nhập chưa và sau đó chuyển hướng họ cho phù hợp. Ví dụ:

{
nếu (isLoggedIn) {
trở lại ;
} Else {
trở lại ;
}
}} />

Trong ví dụ này, chúng tôi đang kiểm tra xem người dùng đã đăng nhập chưa và sau đó hiển thị thành phần Trang đăng nhập hoặc chuyển hướng họ đến /dashboard. Bạn cũng có thể chuyển các đạo cụ vào thành phần Chuyển hướng như sau: Điều này cho phép bạn theo dõi vị trí của người dùng trước khi họ được chuyển hướng.

Làm cách nào để tự động chuyển hướng trong phản ứng

React Router cung cấp một thành phần Chuyển hướng có thể được sử dụng để tự động chuyển hướng người dùng khi một số điều kiện được đáp ứng. Để sử dụng nó, bạn phải chuyển vào đường dẫn bạn muốn chuyển hướng đến làm chỗ dựa. Bạn cũng có thể chuyển vào một đối tượng có trạng thái và/hoặc tham số truy vấn nếu cần.

Để tự động chuyển hướng, bạn sẽ cần sử dụng thành phần này trong thành phần Tuyến đường và thiết lập một điều kiện về thời điểm chuyển hướng sẽ xảy ra. Ví dụ: nếu bạn muốn chuyển hướng người dùng từ trang chủ của ứng dụng đến trang đăng nhập sau khi họ nhấp vào liên kết, bạn có thể thực hiện như sau:

{isLoggedIn? : }

Trong ví dụ này, chúng tôi đang sử dụng biến boolean isLoggedIn (cần được đặt ở một nơi khác) làm điều kiện cho thời điểm chúng tôi nên thực hiện chuyển hướng. Nếu nó đúng, thì chúng tôi kết xuất thành phần Home của mình; mặt khác, chúng tôi thực hiện chuyển hướng.

Làm thế nào để bạn chuyển hướng sau 5 giây trong phản ứng

Để chuyển hướng sau 5 giây trong React Router, bạn có thể sử dụng hàm setTimeout() để gọi phương thức history.push() với tuyến đường mong muốn làm đối số.

Ví dụ:
nhập { useHistory } từ “Reac-router-dom”;
lịch sử const = useHistory();
setTimeout (() => {
history.push(“/redirectedPage”);
},5000);