在 React Router 中使用重定向

Irakli Tchigladze 2023年1月30日 2022年5月18日
  1. 在功能组件中 React 路由重定向
  2. 在类组件中 React 路由重定向
在 React Router 中使用重定向

如果你是从事复杂 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。

Irakli Tchigladze avatar Irakli Tchigladze avatar

Irakli is a writer who loves computers and helping people solve their technical problems. He lives in Georgia and enjoys spending time with animals.

LinkedIn

相关文章 - React Router