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

时间:2017-07-13 19:24:29

标签: reactjs redux react-router

我是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")。详情:How to push to History in React Router v4?

  4. 我对所有这些选项感到困惑,是否有最佳方法来重定向页面?

5 个答案:

答案 0 :(得分:89)

实际上这取决于你的用例

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 locationhistory } 道具。有关更多详细信息,请查看有关withRouter

的官方文档

如果您的组件是<Route />组件的子组件,我的意思是,如果它类似于<Route path='/path' component={myComponent} />,则您不必使用withRouter {{1}包裹组件将<Route /> matchlocation传递给其子女。

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

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

来使用它
history.push()

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

<Link />

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

答案 1 :(得分:6)

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

List

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

答案 2 :(得分:2)

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

了解更多信息

答案 3 :(得分:1)

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

答案 4 :(得分:0)

您还可以在RedirectRoute,如下所示。这用于处理无效路由。

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