使用 React Router 重定向页面的最佳方式是什么? [英] What is the best way to redirect a page using React Router?

问题描述

我是 React Router 的新手，我了解到重定向页面的方法有很多:

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

   import { browserHistory } from 'react-router';//做一点事...browserHistory.push("/path");

2. 使用 this.context.router.push("/path")

   class Foo 扩展 React.Component {构造函数(道具，上下文){超级(道具，上下文)；//做一点事...}重定向(){this.context.router.push("/path")}}Foo.contextTypes = {路由器:React.PropTypes.object}

3. 在 React Router v4 中，有 this.context.history.push("/path") 和 this.props.history.push("/path").详细信息:如何在 React Router v4 中推送到历史记录?

我对所有这些选项感到很困惑，有没有最好的方法来重定向页面?

解决方案

其实这取决于你的用例.

1) 您希望保护您的路线免受未经授权的用户的访问

如果是这种情况，您可以使用名为 <Redirect/> 的组件，并可以实现以下逻辑:

从'react'导入反应从'react-router-dom'导入{重定向}const ProtectedComponent = () =>{如果(身份验证失败)return <重定向到='/login'/>}返回 
我的受保护组件 </div>}

请记住，如果您希望 <Redirect/> 以您期望的方式工作，您应该将它放在组件的渲染方法中，以便最终将其视为 DOM元素，否则将不起作用.

2) 你想在某个动作之后重定向(比如说在创建一个项目之后)

在这种情况下，您可以使用历史记录:

myFunction() {addSomeStuff(data).then(() => {this.props.history.push('/path')}).catch((错误) => {控制台日志(错误)})

或

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')}>一些东西</div>

或者你可以使用 <Link/> 组件:

 <Link to='/path' >一些东西</Link>

我认为这种情况下的经验法则是首先尝试使用 <Link/>，我想尤其是因为性能.

I am new to React Router and learn that there are so many ways to redirect a page:

1. Using 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?

解决方案

Actually it depends on your use case.

1) You want to protect your route from unauthorized users

If that is the case you can use the component called <Redirect /> and can implement the following logic:

import React from 'react'
import  { Redirect } from 'react-router-dom'

const ProtectedComponent = () => {
  if (authFails)
    return <Redirect to='/login'  />
  }
  return <div> My Protected Component </div>
}

Keep in mind that if you want <Redirect /> to work the way you expect, you should place it inside of your component's render method so that it should eventually be considered as a DOM element, otherwise it won't work.

2) You want to redirect after a certain action (let's say after creating an item)

In that case you can use history:

myFunction() {
  addSomeStuff(data).then(() => {
      this.props.history.push('/path')
    }).catch((error) => {
      console.log(error)
    })

or

myFunction() {
  addSomeStuff()
  this.props.history.push('/path')
}

In order to have access to history, you can wrap your component with an HOC called withRouter. When you wrap your component with it, it passes match location and history props. For more detail please have a look at the official documentation for withRouter.

If your component is a child of a <Route /> component, i.e. if it is something like <Route path='/path' component={myComponent} />, you don't have to wrap your component with withRouter, because <Route /> passes match, location, and history to its child.

3) Redirect after clicking some element

There are two options here. You can use history.push() by passing it to an onClick event:

<div onClick={this.props.history.push('/path')}> some stuff </div>

or you can use a <Link /> component:

 <Link to='/path' > some stuff </Link>

I think the rule of thumb with this case is to try to use <Link /> first, I suppose especially because of performance.

这篇关于使用 React Router 重定向页面的最佳方式是什么?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！