使用React路由器重定向页面的最佳方式是什么？[关闭]

Question

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

import { browserHistory } from 'react-router';
//do something...
browserHistory.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”）。详细说明：如何在React路由器V4中推到历史？

我被所有这些选项弄糊涂了，有没有一个最好的方法来重定向一个页面？

Answer 1

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

1）您希望保护路由免受未经授权的用户的攻击

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

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

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

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

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

如果您的组件是 组件的子组件，即类似于 组件={myComponent}/>，则不必用wisthrouter，因为 将match、location和history传递给其子组件。

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

这里有两种选择。您可以通过将history.push()传递给onclick事件来使用它：

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

也可以使用 组件：

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

我认为在这种情况下，经验法则是首先尝试使用 ，我想尤其是因为性能的原因。