Cách tốt nhất để chuyển hướng một trang bằng React Router là gì?

Tôi mới sử dụng React Router và biết rằng có rất nhiều cách để chuyển hướng một trang:

1. Sử dụng browserHistory.push("/path")

   import { browserHistory } from 'react-router';
   //do something...
   browserHistory.push("/path");

2. Sử dụng this.context.router.push("/path")

   class Foo extends React.Component {
       constructor(props, context) {
           super(props, context);
           //do something...
       }
       redirect() {
           this.context.router.push("/path")
       }
   }
   
   Foo.contextTypes = {
       router: React.PropTypes.object
   }

3. Trong React Router v4, có this.context.history.push("/path")và this.props.history.push("/path"). Chi tiết: Làm thế nào để chuyển sang Lịch sử trong React Router v4?

Tôi rất bối rối trước tất cả các tùy chọn này, có cách nào tốt nhất để chuyển hướng một trang không?

Trên thực tế nó phụ thuộc vào trường hợp sử dụng của bạn.

1) Bạn muốn bảo vệ tuyến đường của mình khỏi những người dùng trái phép

Nếu trường hợp đó xảy ra, bạn có thể sử dụng thành phần được gọi <Redirect />và có thể triển khai logic sau:

import React from 'react'
import  { Redirect } from 'react-router-dom'

const ProtectedComponent = () => {
  if (authFails)
    return <Redirect to='/login'  />
  }
  return <div> My Protected Component </div>
}

Hãy nhớ rằng nếu bạn muốn <Redirect />hoạt động theo cách bạn mong đợi, bạn nên đặt nó bên trong phương thức kết xuất của thành phần để cuối cùng nó sẽ được coi là một phần tử DOM, nếu không nó sẽ không hoạt động.

2) Bạn muốn chuyển hướng sau một hành động nhất định (giả sử sau khi tạo một mục)

Trong trường hợp đó, bạn có thể sử dụng lịch sử:

myFunction() {
  addSomeStuff(data).then(() => {
      this.props.history.push('/path')
    }).catch((error) => {
      console.log(error)
    })

hoặc là

myFunction() {
  addSomeStuff()
  this.props.history.push('/path')
}

Để có quyền truy cập vào lịch sử, bạn có thể bọc thành phần của mình bằng một HOC được gọi withRouter. Khi bạn bọc thành phần của mình bằng nó, nó sẽ trôi qua match locationvàhistory đạo cụ. Để biết thêm chi tiết, vui lòng xem tài liệu chính thức cho withRouter .

Nếu thành phần của bạn là một đứa trẻ của một <Route />thành phần, tức là nếu nó là một cái gì đó giống như <Route path='/path' component={myComponent} />, bạn không cần phải quấn thành phần của bạn với withRouter, vì <Route />đèo match, locationvàhistory cho con của mình.

3) Chuyển hướng sau khi nhấp vào một số phần tử

Có hai lựa chọn ở đây. Bạn có thể sử dụng history.push()bằng cách chuyển nó vào một onClicksự kiện:

<div onClick={this.props.history.push('/path')}> some stuff </div>

hoặc bạn có thể sử dụng một <Link />thành phần:

 <Link to='/path' > some stuff </Link>

Tôi nghĩ rằng quy tắc ngón tay cái với trường hợp này là cố gắng sử dụng <Link />trước, tôi cho rằng đặc biệt là vì hiệu suất.

Bây giờ với bộ định tuyến phản ứng v15.1trở đi, chúng ta có thể kết useHistorynối, Đây là cách cực kỳ đơn giản và rõ ràng. Đây là một ví dụ đơn giản từ blog nguồn.

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

function BackButton({ children }) {
  let history = useHistory()
  return (
    <button type="button" onClick={() => history.goBack()}>
      {children}
    </button>
  )
}

Bạn có thể sử dụng điều này trong bất kỳ thành phần chức năng nào và các móc tùy chỉnh. Và có, điều này sẽ không hoạt động với các thành phần lớp giống như bất kỳ hook nào khác.

Tìm hiểu thêm về điều này tại đây https://reacttraining.com/blog/react-router-v5-1/#usehistory

Bạn cũng có thể sử dụng thư viện react router dom, useHistory;

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

function HomeButton() {
  let history = useHistory();

  function handleClick() {
    history.push("/home");
  }

  return (
    <button type="button" onClick={handleClick}>
      Go home
    </button>
  );
}
`

https://reactrouter.com/web/api/Hooks/usehistory

Một trong những cách đơn giản nhất: sử dụng Liên kết như sau:

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

<Link to={`your-path`} activeClassName="current">{your-link-name}</Link>

Nếu chúng ta muốn bao gồm toàn bộ phần div dưới dạng liên kết:

 <div>
     <Card as={Link} to={'path-name'}>
         .... 
           card content here
         ....
     </Card>
 </div>

Bạn cũng có thể Redirecttrong phạm vi Routenhư sau. Điều này là để xử lý các tuyến đường không hợp lệ.

<Route path='*' render={() => 
     (
       <Redirect to="/error"/>
     )
}/>