在 React Router 中使用重定向

1. 在功能组件中 React 路由重定向
2. 在类组件中 React 路由重定向

如果你是从事复杂 Web 应用程序的开发人员，你可能了解路由的重要性。路由是构成应用程序导航系统的关键部分之一。ReactJs 开发人员倾向于使用 react-router-dom 包来为应用程序创建路由。
提交表单（或任何其他用户操作）后，有时应用程序需要导航到不同的 URL。在本文中，我们将看看如何在 React 中处理重定向。

在功能组件中 React 路由重定向

Hooks 可以扩展功能组件的基本功能。React 开发人员可以使用内置钩子，如 useReducer()、useState()、useEffect() 或创建他们自己的自定义版本。

useHistory() 钩子

useHistory() 返回一个 history 实例，其中包含组件的当前位置 (URL)。处理重定向不是这个钩子的主要目的。但是，新版本的 React Router（5 及更高版本）允许你使用此钩子以高效且可读的方式重定向用户。

让我们看一下这个例子：

import { useHistory } from "react-router-dom"
function SampleComponent() {
  let history = useHistory()
  function handleClick() {
    history.push("/somepage")
  }

  return (
    <span onClick={() => handleClick()}>
      Go home
    </span>
  )
}

在这个例子中，我们从 react-router-dom 包中导入了 useHistory 钩子。然后我们定义一个简单的功能组件，该组件返回单个 <span> 元素，并带有一个用于 click 事件的事件处理程序。

我们还创建了一个 history 变量来存储由 useHistory() 钩子返回的实例。

在事件处理函数的主体中，我们使用 .push() 方法并传递一个字符串作为参数。此方法的参数将添加到当前 URL 的末尾。因此，如果我们的应用程序在 localhost:3000 端口上运行，并且我们必须处理 click 事件，我们的 URL 将更改为 localhost:3000/somepage。

在类组件中 React 路由重定向

在执行操作（提交表单、单击按钮或任何其他用户操作）后导航到不同 URL 的另一种方法是使用自定义 <Redirect> 组件。你可以从 "react-router-dom" 库中导入它。
你可以通过根据状态值有条件地呈现重定向来控制何时发生重定向。让我们看看这个例子：

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

class MyComponent extends React.Component {
  constructor(props){
     super(props)
     this.state = {
    	    condition: false
  		}
  }
  handleClick () {
    axios.post(/*URL*/)
      .then(() => this.setState({ condition: true }));
  }

  render () {
    const { condition } = this.state;

     if (condition) {
       return <Redirect to='/somePage'/>;
     }
     return <button onClick={() => this.handleClick()}>Redirect</button>;
}

我们的状态有一个 condition 属性，它被设置为 false。由于这个布尔值，<Redirect> 组件不会呈现并且用户的 URL 不会更改。

通过单击单个按钮，用户可以触发将 condition 属性设置为 true 的事件处理程序。在这种情况下，将满足 if 语句的条件，并且渲染函数将返回 <Redirect> 组件，该组件会将用户带到指定的相对路径。

在这种情况下，如果我们的应用程序的主页位于 localhost:3000，而我们的 <Redirect> 组件有一个值为 '/somePage' 的 to 属性，用户将被重定向到以下位置位置：localhost:3000/somePage。

this.props.history.push("")

使用 useHistory() 钩子并不是访问用户当前位置的唯一方法。通过读取 props 对象的 history 属性，开发人员可以在两种类型的组件中实现相同的功能。

如果你希望在单击按钮后发生重定向，则必须设置一个 onClick 事件处理程序，该事件处理程序将使用 .push("") 方法提供指向用户应该被重定向的位置的相对路径。下面是一个例子：

<button onClick={this.props.history.push('/somePage')}>Redirect to some page </button>

如果他们当前的位置在 localhost:3000 主页上，单击此按钮会将用户带到 localhost:3000/somePage URL。