使用React Router重定向页面的最佳方法是什么？

Question 1

我是React Router的新手，并了解到重定向页面的方法有很多：

使用 browserHistory.push("/path")

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

使用 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
}

在React Router v4中，有this.context.history.push("/path")和this.props.history.push("/path")。详细信息：如何在React Router v4中推送到历史记录？

我对所有这些选项感到困惑，是否有最佳的方法来重定向页面？

Question 2

实际上，这取决于您的用例。

1）您想保护您的路线免受未经授权的用户的侵害

如果是这种情况，则可以使用称为的组件，<Redirect />并可以实现以下逻辑：

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

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

请记住，如果您想<Redirect />按预期的方式工作，则应将其放在组件的render方法中，以便最终应将其视为DOM元素，否则它将无法工作。

2）您要在执行某项操作后进行重定向（例如，创建项目后）

在这种情况下，您可以使用历史记录：

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

要么

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

为了访问历史记录，您可以使用名为的HOC包装组件withRouter。当您用它包装您的组件时，它会通过match location并进行history支撑。有关更多详细信息，请参阅有关的官方文档 withRouter。

如果你的组件是一个的子<Route />组件，即如果是这样<Route path='/path' component={myComponent} />，你不必换用您的组件withRouter，因为<Route />传球match，location和history它的孩子。

3）单击某些元素后重定向

这里有两个选择。您可以history.push()通过将其传递给onClick事件来使用：

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

或者您可以使用一个<Link />组件：

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

我认为这种情况的经验法则是首先尝试使用<Link />，我想尤其是因为性能。

Question 3

现在有了react-router v15.1以后，我们可以进行useHistory钩子了，这是超级简单明了的方式。这是源博客中的一个简单示例。

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

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

您可以在任何功能组件和自定义挂钩中使用它。是的，这不适用于与其他任何钩子相同的类组件。

在此处了解更多信息https://reacttraining.com/blog/react-router-v5-1/#usehistory

Question 4

您还可以使用react路由器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

Question 5

最简单的方法之一：如下使用Link：

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

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

如果要覆盖整个div部分作为链接：

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

Question 6

您还可以Redirect在Route以下范围内。这用于处理无效路由。

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