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

我是 React 路由器的新手，我知道有很多方法可以重定向一个页面:

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

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

  2. Using 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. In React Router v4, there's this.context.history.push("/path") and this.props.history.push("/path"). Details: How to push to History in React Router v4?

I'm so confused by all these options, is there a best way to redirect a page?

431302 次浏览
小开
最佳答案

实际上，这取决于您的用例。

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 来包装组件。当您用它包装您的组件时，它将通过 matchlocation和 history道具。更多细节，请看看官方文件的 路由器。

如果您的组件是 <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 />，我想特别是因为性能。

小开

现在有了反应路由器 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的资料

小开

你也可以使用反应路由器 Dom 库来使用历史;

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

小开

您也可以在 Route中使用 Redirect，如下所示。

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

最简单的方法之一: 使用如下链接:

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>

提交答案