我是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?
我对所有这些选项感到困惑,是否有最佳方法来重定向页面?
答案 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
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>`
答案 1 :(得分:6)
答案 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)
您还可以在Redirect
内Route
,如下所示。这用于处理无效路由。
<Route path='*' render={() =>
(
<Redirect to="/error"/>
)
}/>