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

Question

我是React Router的新手,了解到有很多方法可以重定向页面:

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

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

2. 运用 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. 在React Router v4中,有this.context.history.push("/path")和this.props.history.push("/path").详细信息:如何在React Router v4中推送到历史记录？

我对所有这些选项感到困惑,有没有最好的方法来重定向页面？

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')
}

为了能够访问历史记录,您可以使用withRouter在使用它包装组件时调用的HOC 包装组件,它可以传递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 />首先尝试使用

Answer 2

你也可以使用 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

Answer 3

现在有了 react-routerv15.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