在 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