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

Question

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

1. 使用 browserHistory.push("/path")

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

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

1. 在React Router v4中，有this.context.history.push("/path")和this.props.history.push("/path")。

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

Answer 1

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

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 />，我想尤其是因为性能。