Điều hướng theo chương trình trong React sử dụng react-router

1. Thành phần <Redirect>

Chúng ta có thể chuyển hướng bằng cách sử dụng thành phần <Redirect> bằng cách chỉ cần chuyển tuyến đường mà chúng ta muốn chuyển hướng đến và hiển thị thành phần. Nó đã được tải trong thư viện react-router-dom.

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

Cách dễ nhất để sử dụng phương pháp này là duy trì một thuộc tính chuyển hướng bên trong trạng thái của thành phần.

state = { redirect: null };
render() {
  if (this.state.redirect) {
    return <Redirect to={this.state.redirect} />
  }
  return(
  // Your Code goes here
  )
}

Bất cứ khi nào bạn muốn chuyển hướng đến một đường dẫn khác, bạn có thể chỉ cần thay đổi trạng thái để hiển thị lại thành phần, do đó hiển thị thành phần <Redirect>.

this.setState({ redirect: "/someRoute" });

Lưu ý
Đây là cách được đề xuất để điều hướng khác với phương thức <Liên kết>.
Thảo luận chi tiết ở cuối bài viết.

Nhược điểm của phương pháp này là trong những trường hợp như khi chúng ta muốn chuyển hướng trực tiếp từ một hành động redux, chúng ta không thể làm như vậy.

2. sử dụngHistory Hook

Kể từ phiên bản 5.1.2, bộ định tuyến phản ứng đi kèm với một số móc nối mới có thể giúp chúng tôi truy cập trạng thái của bộ định tuyến.

Hiện tại, chúng ta chỉ cần nói về hook useHistory.

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

function App() {
  let history = useHistory();
}

Sau đó, chúng ta có thể sử dụng phương thức .push () để chuyển hướng đến bất kỳ tuyến đường nào chúng ta muốn.

history.push('/someRoute')

3. Nền tảng lịch sử

Mọi thành phần là con ngay lập tức của thành phần <Route> nhận đối tượng lịch sử làm chỗ dựa. Đây là cùng một lịch sử (thư viện) lưu giữ lịch sử của phiên làm việc của React Router. Do đó, chúng tôi có thể sử dụng các thuộc tính của nó để điều hướng đến các đường dẫn cần thiết.

this.props.history.push("/first");

Một vấn đề phổ biến mà chúng ta có thể gặp phải ở đây là trong các thành phần không phải là con ngay lập tức của thành phần <Route>, không có phần hỗ trợ lịch sử nào. Điều này có thể được giải quyết dễ dàng bằng cách sử dụng chức năng withRouter.

3.1. withRouter

withRouter là một chức năng được cung cấp trong thư viện react-router-dom giúp chúng tôi truy cập lịch sử hỗ trợ trong các thành phần không phải là con ngay lập tức của các thành phần <Route>.
Để nhập vớiRouter

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

Bây giờ để có được lịch sử hỗ trợ bên trong thành phần của chúng ta, chúng ta cần bao bọc thành phần của mình bằng withRouter trong khi xuất nó.

export default withRouter(yourComponent);

Bây giờ chúng ta có thể truy cập vào lịch sử hỗ trợ giống như ở trên để thực hiện các điều hướng cần thiết của chúng ta.

4. createHistory

Các phương pháp chúng ta đã học ở trên có thể bao gồm hầu hết các trường hợp mà chúng ta sẽ gặp phải khi xây dựng ứng dụng phản ứng, vậy tại sao lại là phương pháp thứ tư?
Mỗi khi chúng ta cần chuyển hướng từ, ví dụ như một hành động redux, chúng ta luôn phải chuyển lịch sử cho hành động, làm tăng số lượng đối số một cách không cần thiết. Do đó, phương pháp này có thể được sử dụng để lấy mã gọn gàng hơn.

Trong phương pháp này, chúng tôi tạo phiên bản lịch sử tùy chỉnh mà chúng tôi có thể nhập vào các tệp khác để chuyển hướng.

// Inside /utils/history.js
import createHistory from "history/createBrowserHistory";
export default createHistory();

Vì <BrowserRouter> sử dụng lịch sử của chính nó và không chấp nhận bất kỳ thuộc tính lịch sử bên ngoài nào, chúng tôi phải sử dụng <Router> thay vì nó.

import { Router } from "react-router-dom";
import history from "./utils/history";

function App(){
  return(
    <Router history={history}>
    // Your Routes go here
    <Router>
  )
}

Sau đó, chúng tôi có thể nhập phiên bản lịch sử này vào bất kỳ tệp nào chúng tôi muốn chuyển hướng từ đó.

import history from "./utils/history";

history.push("/somePath");

Note

Về cốt lõi, React là một cách tiếp cận mang tính khai báo để xây dựng giao diện người dùng.

Phương pháp tiếp cận khai báo là phương pháp mà chúng ta thể hiện logic của một phép tính mà không mô tả luồng điều khiển của nó, hoặc không mô tả những gì thực sự đang xảy ra đằng sau hậu trường.

Vì lý do này, cách được đề xuất để điều hướng khác với <Liên kết> là sử dụng thành phần <Chuyển hướng>.

Không có hại gì khi sử dụng các phương pháp khác được đề cập ở đây, chỉ là chúng không phù hợp chính xác với tầm nhìn của React.