在 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 is a writer who loves computers and helping people solve their technical problems. He lives in Georgia and enjoys spending time with animals.
LinkedIn