使用 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") 。详细信息： 如何在 React Router v4 中推送到历史记录？

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

原文由 Liutong Chen 发布，翻译遵循 CC BY-SA 4.0 许可协议

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 /> 以您期望的方式工作，您应该将它放在组件的渲染方法中，以便最终将其视为 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 /> ，我想尤其是因为性能。

原文由 Cagri Yardimci 发布，翻译遵循 CC BY-SA 4.0 许可协议

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

原文由 Maya Liberman 发布，翻译遵循 CC BY-SA 4.0 许可协议