使用 React Router 以編程方式導航
簡介
現代網站上的頁面，尤其是單頁應用程序 (SPA) 當新頁面發生變化時，不要完全按照傳統方法完全加載新頁面。 客戶端路由 而是使用 - 在執行操作（例如單擊按鈕或鏈接）時路由資源以加載程序的另一部分或在結構上更改應用程序的整個視圖。
React 是一個廣受歡迎的前端開發庫，用於創建高度響應的用戶界面，當然，它有自己的 Router ，它執行客戶端路由 - react-router-dom .
創建一個 React 應用程序
讓我們從通過命令行創建一個簡單的 React 應用開始：
$ npx create-react-app router-sample
創建完成後，讓我們進入項目目錄，並啟動應用程序：
$ cd router-sample
$ npm start
這將在 localhost:3000 上啟動服務器 並且您的默認瀏覽器將啟動以服務該應用程序。在創建任何新文件以在此端點上提供服務之前，讓我們安裝 react-router-dom ，因為它沒有預先包裝。
安裝 React 路由器
像往常一樣，使用 npm 安裝包 就像運行單個命令一樣簡單：
$ npm install react-router-dom
使用 React Router 創建新路由
react-router-dom 包使創建新路線變得簡單。首先，您使用 <BrowserRouter> 包裝整個應用程序 標籤。我們這樣做是為了訪問瀏覽器的 history 目的。然後定義路由鏈接，以及將用於每個路由的組件。
為了演示這一點，讓我們創建一個名為 About.js 的新文件 在 /src 文件夾：
const About = () => {
return (
<div>
<h1>About page here!</h1>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit, modi!
</p>
</div>
);
};
export default About;
現在，讓我們更新 src/index.js 頁面並導入 About 從我們剛剛創建的文件中。 <BrowserRouter> 內 標籤，我們將定義我們的路由和與之關聯的組件：
import { render } from "react-dom";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import App from "./App";
import About from "./About";
render(
<BrowserRouter>
<Routes>
<Route path="/" element={<App />} />
<Route path="about" element={<About />} />
</Routes>
</BrowserRouter>,
document.getElementById("root")
);
我們已經導入了 <BrowserRouter> 在這裡，我們將整個應用程序包裹在它周圍。我們還選擇了 App.js 作為我們主頁的組件（在 / 下 端點）和 About.js 作為 /about 的組件 頁面。
最後，我們來適配一下App.js 文件，它將再次成為應用程序的主要入口點並服務於我們的主頁：
import { Link } from "react-router-dom";
function App() {
return (
<div className="App">
<h1>Welcome to my react app!</h1>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus,
pariatur?
</p>
<br />
<Link to="/about">About Page</Link>
</div>
);
}
export default App;
在這個階段，我們創建了兩條路線：入口路線（/ ) 和 /about 路由，當我們訪問我們的應用程序時，我們應該能夠輕鬆地從主頁導航到關於頁面：
React Router Hooks（導航方法）
掛鉤 最近被添加到 React 中，這些函數允許您“掛鉤”到應用程序的狀態，而無需編寫新類。 React 路由器帶有一些鉤子，允許我們以編程方式訪問路由器狀態並在組件之間導航。其中有以下鉤子：
useHistory()userNavigate()useLocation()useParams()
要使用這些鉤子中的任何一個，我們必須首先從 react-router-dom 導入它們 包，然後指定一個調用鉤子的變量；我們將在接下來的部分中更詳細地介紹這一點。
useHistory()
注意： useHistory() 在最新版本的 React Router 中已棄用 hook。如果你使用 React Router V6，你會想要使用 useNavigate() 取而代之的是鉤子。它在 useHistory() 之後被覆蓋 .
useHistory() hook 提供了對 React Router 歷史實例的直接訪問，使我們能夠執行諸如檢索歷史堆棧中的條目數量、添加、更改或從堆棧中刪除條目等操作。
免費電子書：Git Essentials
查看我們的 Git 學習實踐指南，其中包含最佳實踐、行業認可的標準以及隨附的備忘單。停止谷歌搜索 Git 命令並真正學習 它！
這裡的一些最有用的方法包括：
goBack()- 在歷史上倒退。goForward()- 在歷史中前進。push()- 向歷史堆棧添加新條目，即導航到新 URL。replace()- 類似於push()因為它替換了歷史中的當前堆棧，但與push()不同 ，用戶無法返回曆史，即點擊瀏覽器返回按鈕不會返回到之前的狀態。
有了這個，我們可以從我們的 About 導航 通過 push() 以編程方式將頁面轉到主頁 在歷史記錄中添加一個新條目，有效地將用戶導航到新條目：
import React from "react";
import { useHistory } from "react-router-dom";
const About = () => {
let history = useHistory();
const goHome = () => {
history.push("/");
};
return (
<div>
<h1>About page here!</h1
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit, modi!
</p>
<button onClick={goHome}>Go to home page</button>
</div>
);
};
export default About;
在這裡，我們只導入 useHistory() 鉤子並創建一個新的 goHome() 單擊按鈕時執行的函數。它只是 push() 的包裝器 打電話。
我們還可以傳輸狀態或發送任意數據到我們正在導航的路線。我們可以通過將對象而不是路徑名作為字符串發送到 push 方法來做到這一點，並將我們的狀態添加到不同的對象：
history.push({
pathname: '/blog,
search: '?blogId=12, // Query string
state: { // Location state
author_name: "John Doe",
},
});
覆蓋後useNavigate() ，我們將看看如何使用 useLocation() 訪問這些數據 和 useParams() 掛鉤。
useNavigate()
如果你使用的是最新版本的 React Router，useHistory() hook 已被棄用，取而代之的是 useNavigate() .方法幾乎相同；主要區別在於 useNavigate() 鉤子不接受像 .push() 這樣的方法 或 .replace() .你只是 navigate() 到某個條目：
import React from "react";
import { useNavigate } from "react-router-dom";
const About = () => {
let navigate = useNavigate();
const goHome = () => {
navigate("/");
};
return (
<div>
<h1>About page here!</h1>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit, modi!
</p>
<button onClick={goHome}>Go to home page</button>
</div>
);
};
export default About;
而且，當然，這種方法還允許我們在路由之間傳遞狀態：
navigate("/blog", { state: { author_name: "John Doe" } });
使用 useLocation() 檢索路由之間的數據 和 useParams()
useLocation() hook 讓我們可以訪問瀏覽器的 location 目的。將其視為負責獲取有關當前路線的必要信息的鉤子：
import { useNavigate, useLocation } from "react-router-dom";
/*...*/
let location = useLocation();
console.log(location);
運行上面的代碼應該會返回當前路由的所有信息，如下圖：
{
"pathname": "/about",
"search": "",
"hash": "",
"state": null,
"key": "default"
}
想到 useLocation() 是有道理的 作為 useState() 的鉤子 每當 URL 更改時，將狀態更新到新位置的鉤子。另一方面，userParams() hook 可用於獲取 URL 參數的值。調用時，useParams() 提供一個對象，將 URL 參數的名稱映射到它們在當前 URL 中的值。
例如，在我們的路由器配置中，假設我們有一個動態路由：
<Route path="/about/:user_id">
<About />
</Route>
在另一個頁面上，我們有一個鏈接組件，它指向與 User 2 相關的一些信息 ：
<Link to="/about/2">About User 2</Link>
當參數被傳遞時，就像我們之前看到的 - 我們可以通過 userParams() 訪問參數 鉤子：
import { useParams } from "react-router-dom";
const About = () => {
const { user_id } = useParams();
return (
<div>
<h1>About user {user_id}</h1>
<p>
Lorem ipsum dolor...
</p>
</div>
);
};
export default About;
結論
React Router 用於客戶端路由 的資源。在本指南中，我們快速了解瞭如何使用 React Router 以編程方式導航應用程序，以及如何在路由之間傳輸狀態。
