在 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。