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

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

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

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 />

按预期的方式工作，则应将其放在组件的render方法中，以便最终应将其视为DOM元素，否则它将无法工作。

2）您要在执行某项 *** 作后进行重定向（例如，创建项目后）

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

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

要么

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

为了访问历史记录，您可以使用名为的HOC包装组件

withRouter

。当您用它包装您的组件时，它会通过

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')}> some stuff </div>

或者您可以使用一个

<link />

组件：

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

我认为这种情况的经验法则是首先尝试使用

<link />

，我想尤其是因为性能。