Question

我是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")。详情：How to push to History in 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 />以您期望的方式工作，则应将其放在组件的渲染方法中，以便最终将其视为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 {{1}包裹组件将<Route /> match和location传递给其子女。

3）点击某个元素后重定向

这里有两种选择。您可以通过将history传递给onClick事件

来使用它

history.push()

或者您可以使用<div onClick={this.props.history.push('/path')}> some stuff </div>组件

<Link />

我认为这个案例的经验法则是（我认为特别是因为性能）尝试首先使用`<Link to='/path' > some stuff </Link>`

Answer 2

您还可以使用react路由器dom库useHistory;

List

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

Answer 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

了解更多信息

Answer 4

最简单的方法之一：如下使用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>

Answer 5

您还可以在Redirect内Route，如下所示。这用于处理无效路由。

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

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

5 个答案: