在 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