React Router v6 完全指南，超實(shí)用！
大家好，我是 CUGGZ。
React Router 是 React 生態(tài)系統(tǒng)中最受歡迎的第三方庫(kù)之一，近一半的 React 項(xiàng)目中使用了 React Router，下面就來(lái)看看如何在 React 項(xiàng)目中使用 React Router v6 吧！
1. 概述
React Router 創(chuàng)建于 2014 年，是一個(gè)用于 React 的聲明式、基于組件的客戶端和服務(wù)端路由庫(kù)，它可以保持 UI 與 URL 同步，擁有簡(jiǎn)單的 API 與強(qiáng)大的功能。
大多數(shù)現(xiàn)代 React 項(xiàng)目使用 npm、yarn、pnpm 等包管理器來(lái)管理項(xiàng)目依賴項(xiàng)。要將 React Router 添加到現(xiàn)有項(xiàng)目，就需要根據(jù)使用的包管理器來(lái)安裝依賴：
// npm
npm install react-router-dom@6
// pnpm
pnpm add react-router-dom@6
// yarn
yarn add react-router-dom@6接下來(lái)，使用 CodeSandBox 來(lái)創(chuàng)建一個(gè) React + TypeScript 項(xiàng)目，使用核心庫(kù)的版本如下：
- react：18.0.0
- react-dom：18.0.0
- react-router：6.3.0
- react-router-dom：6.3.0
Demo 初始目錄結(jié)構(gòu)如下：
- public
- src
- App.tsx
- index.tsx
- style.css
- package.json
- tsconfig.json在介紹 React Router 的概念以前，需要先區(qū)分兩個(gè)概念：
- react-router：為 React 應(yīng)用提供了路由的核心功能。
- react-router-dom：基于 react-router，加入了在瀏覽器運(yùn)行環(huán)境下的一些功能。
2. 基本使用
（1）BrowserRouter
要想在 React 應(yīng)用中使用 React Router，就需要在 React 項(xiàng)目的根文件（index.tsx）中導(dǎo)入 Router 組件：
import { StrictMode } from "react";
import * as ReactDOMClient from "react-dom/client";
import { BrowserRouter } from "react-router-dom";
import App from "./App";
const rootElement = document.getElementById("root");
const root = ReactDOMClient.createRoot(rootElement);
root.render(
<StrictMode>
<BrowserRouter>
<App />
</BrowserRouter>
</StrictMode>
);在這個(gè)文件中，我們導(dǎo)入了 BrowserRouter 組件，然后使用該組件包裹了 App 組件。現(xiàn)在，在這個(gè) BrowserRouter 組件中，來(lái)自 react-router-dom 的其他組件和 hooks 就可以正常工作了。
BrowserRouter 是最常用的路由方式，即瀏覽器路由。官方文檔也建議將 BrowserRouter 組件用于 Web 應(yīng)用程序。除了這種方式，React Router 還支持其他幾種路由方式：
- HashRouter：在路徑前加入#成為一個(gè)哈希值，Hash 模式的好處是不會(huì)因?yàn)樗⑿马?yè)面而找不到對(duì)應(yīng)路徑；
- MemoryRouter：不存儲(chǔ) history，路由過(guò)程保存在內(nèi)存中，適用于 React Native 這種非瀏覽器環(huán)境；
- NativeRouter：配合 React Native 使用，多用于移動(dòng)端；
- StaticRouter：主要用于服務(wù)端渲染時(shí)。
（2）NavLink
在創(chuàng)建導(dǎo)航鏈接之前，先在App.tsx組件中創(chuàng)建一個(gè)標(biāo)題：
import "./styles.css";
export default function App() {
return (
<div className="App">
<header>
<h1>Hello World</h1>
</header>
</div>
);
}頁(yè)面如下：
下面來(lái)創(chuàng)建三個(gè)導(dǎo)航鏈接，這些鏈接會(huì)指向App.tsx 中的一些路由。這時(shí)就需要導(dǎo)入 NavLink 組件，它是一個(gè)導(dǎo)航鏈接組件，類似于 HTML 中的<a>標(biāo)簽。NavLink 組件使用 to 來(lái)指定需要跳轉(zhuǎn)的鏈接：
import { NavLink } from "react-router-dom";
import "./styles.css";
export default function App() {
return (
<div className="App">
<header>
<h1>Hello World</h1>
</header>
<nav>
<NavLink to="">首頁(yè)</NavLink>
<NavLink to="product">產(chǎn)品</NavLink>
<NavLink to="about">關(guān)于</NavLink>
</nav>
</div>
);
}當(dāng)點(diǎn)擊“首頁(yè)”時(shí)，就會(huì)跳轉(zhuǎn)至路由 /：
當(dāng)點(diǎn)擊“產(chǎn)品”時(shí)，就會(huì)跳轉(zhuǎn)至路由 /product：
當(dāng)點(diǎn)擊“關(guān)于”時(shí)，就會(huì)跳轉(zhuǎn)至路由 /about：
可以看到，當(dāng)點(diǎn)擊這些導(dǎo)航鏈接時(shí)，網(wǎng)頁(yè)的 URL 就會(huì)改變，跳轉(zhuǎn)到對(duì)應(yīng)的路由。
NavLink 是存在 active 狀態(tài)的，所以可以為active 狀態(tài)和非active 狀態(tài)的導(dǎo)航鏈接添加樣式：
.nav-active {
color: red;
font-weight: bold;
}接下來(lái)為導(dǎo)航鏈接添加樣式判斷條件，選擇性的為其添加nav-active類：
import { NavLink } from "react-router-dom";
import "./styles.css";
export default function App() {
return (
<div className="App">
<header>
<h1>Hello World</h1>
</header>
<nav>
<NavLink
to=""
className={({ isActive }) => isActive ? "nav-active" : void 0}
>
首頁(yè)
</NavLink>
<NavLink to="product">產(chǎn)品</NavLink>
<NavLink to="about">關(guān)于</NavLink>
</nav>
</div>
);
}當(dāng)點(diǎn)擊“首頁(yè)”時(shí)，會(huì)跳轉(zhuǎn)到首頁(yè)，導(dǎo)航鏈接會(huì)變成 active 狀態(tài)。這時(shí)，“首頁(yè)”二字會(huì)變成紅色，字體也會(huì)加粗：
（3）Link
在 react-router-dom 中，可以使用 Link 組件來(lái)創(chuàng)建常規(guī)鏈接。Link 組件與 NavLink 組件非常相似，唯一的區(qū)別就是 NavLink 存在 active 狀態(tài)，而 Link 沒(méi)有。
Link 組件和 NavLink 組件的使用方式類似，例如在產(chǎn)品頁(yè)面有一個(gè)返回首頁(yè)的按鈕，需要傳遞給 to 需要跳轉(zhuǎn)的路徑：
import { Link } from "react-router-dom";
import "./styles.css";
export default function Product() {
return (
<div className="product">
<header>
<Link to="/">返回首頁(yè)</Link>
</header>
</div>
);
}如果需要對(duì) Link 進(jìn)行更多控制，也可以傳遞給 to 一個(gè)對(duì)象，在這個(gè)對(duì)象中，可以通過(guò) search 屬性來(lái)添加查詢字符串或通過(guò) hash 屬性來(lái)傳遞 hash值，例如：
import { Link } from "react-router-dom";
import "./styles.css";
export default function Settings() {
return (
<div className="settings">
<header>
<h1>Hello World</h1>
<Link
to={{
pathname: "/settings",
search: "?sort=date",
hash: "#hash"
}}
>
設(shè)置
</Link>
</header>
</div>
);
}點(diǎn)擊“設(shè)置”時(shí)，路由就變成了：/settings?sort=date#hash。
（4）Routes
下面來(lái)看看如何將路由映射為對(duì)應(yīng)的頁(yè)面（組件）。首先需要從 react-router-dom 中導(dǎo)入一個(gè)名為 Routes 的組件，它將包含可以在頁(yè)面特定部分顯示的所有不同的路由。
在 index.tsx 中進(jìn)行如下修改：
import { NavLink, Routes, Route } from "react-router-dom";
import Product from "./Product";
import "./styles.css";
export default function App() {
return (
<div className="App">
<header>
<h1>Hello World</h1>
</header>
<nav>
<NavLink to="">首頁(yè)</NavLink>
<NavLink to="product">產(chǎn)品</NavLink>
<NavLink to="about">關(guān)于</NavLink>
</nav>
<Routes>
</Routes>
</div>
);
}我們需要在 Routes 組件中使用 Route 組件來(lái)定義所有路由。該組件接受兩個(gè) props：
- path：頁(yè)面 URL 應(yīng)導(dǎo)航到的路徑，類似于 NavLink 組件的 to；
- element：頁(yè)面導(dǎo)航到該路由時(shí)加載的元素。
Route 組件用于將應(yīng)用的位置映射到不同的 React 組件。例如，當(dāng)用戶導(dǎo)航到 /product 路徑時(shí)呈現(xiàn) Product 組件，可以這樣來(lái)寫：
import { NavLink, Routes, Route } from "react-router-dom";
import Product from "./Product";
import About from "./About";
import Home from "./Home";
import Error from "./Error";
import "./styles.css";
export default function App() {
return (
<div className="App">
<header>
<h1>Hello World</h1>
</header>
<nav>
<NavLink to="">首頁(yè)</NavLink>
<NavLink to="product">產(chǎn)品</NavLink>
<NavLink to="about">關(guān)于</NavLink>
</nav>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/product" element={<Product />} />
<Route path="/about" element={<About />} />
<Route path="*" element={<Error />} />
</Routes>
</div>
);
}當(dāng)點(diǎn)擊“產(chǎn)品”時(shí)，就會(huì)加載 Product 組件：
當(dāng)點(diǎn)擊“首頁(yè)”時(shí)，就會(huì)加載 Home 組件：
當(dāng)在地址欄輸入一個(gè)沒(méi)有定義的路由時(shí)，就會(huì)加載 Error 組件：
從上面的代碼中可以看到，如果想要在所有 Route 都不匹配時(shí)就渲染 404 頁(yè)面，只需將 404 頁(yè)面對(duì)應(yīng)的 Route 的 path 設(shè)置為 *：
<Routes>
<Route path="/" element={<Home />} />
<Route path="product" element={<Product />} />
<Route path="about" element={<About />} />
<Route path="*" element={<Error />} />
</Routes>（5）路由順序
在 React Router v6 以前，我們必須按照一定的順序來(lái)定義路由，以獲得準(zhǔn)確的渲染。在 v6 及之后的版本中，路由定義的順序無(wú)關(guān)緊要。
以下代碼在 v5 中，/product/new將匹配到第一個(gè)路由并渲染 Product 組件：
<Switch>
<Route path="/product/:id" component={Product} />
<Route path="/product/new" component={NewProduct} />
</Switch>而在 v6 中，將 <Switch> 組件替換為了 <Routes> 組件。/products/new將匹配這兩個(gè)路由，但只會(huì)渲染NewProduct組件，因?yàn)樗歉唧w的匹配：
<Routes>
<Route path="/product/:id" element={<Product />} />
<Route path="/product/new" element={<NewProduct />} />
</Routes>3. 編程式導(dǎo)航
React Router 提供了兩種不同的編程式導(dǎo)航方式：
- 聲明式導(dǎo)航組件：<Navigate> 組件
- 命令式導(dǎo)航方法：useNavigate Hook
我們可以使用這兩種編程的方式來(lái)跳轉(zhuǎn)到指定的路由，也可以實(shí)現(xiàn)路由的重定向，比如在瀏覽器的地址欄輸入一個(gè) URL 并進(jìn)行跳轉(zhuǎn)時(shí)，如果應(yīng)用中沒(méi)有定義該路由，就跳轉(zhuǎn)到應(yīng)用的首頁(yè)。
（1）Navigate
<Navigate>組件是一種聲明式的導(dǎo)航方式。使用 Navigate 組件時(shí)，首先需要從 react-router-dom 導(dǎo)入 Navigate 組件。然后在 Navigate 組件中通過(guò) to props 來(lái)指定要跳轉(zhuǎn)的路徑：
import { NavLink, Routes, Route, Navigate } from "react-router-dom";
import Product from "./Product";
import About from "./About";
import Home from "./Home";
import "./styles.css";
export default function App() {
return (
<div className="App">
<header>
<h1>Hello World</h1>
</header>
<nav>
<NavLink to="">首頁(yè)</NavLink>
<NavLink to="product">產(chǎn)品</NavLink>
<NavLink to="about">關(guān)于</NavLink>
</nav>
<Routes>
<Route path="/" element={<Home />} />
<Route path="product" element={<Product />} />
<Route path="about" element={<About />} />
<Route path="*" element={<Navigate to="/" />} />
</Routes>
</div>
);
}這樣，當(dāng)在瀏覽器地址欄輸入一個(gè)未定義的路由時(shí)，就會(huì)要轉(zhuǎn)到首頁(yè)。
（2）useNavigate
useNavigate Hook是一種命令式導(dǎo)航方式。使用這個(gè) Hook 時(shí)，首先需要從 react-router-dom 中導(dǎo)入 useNavigate，然后傳遞給它需要跳轉(zhuǎn)的路由即可。假如在提交完表單之后，跳轉(zhuǎn)到主頁(yè)，可以這樣實(shí)現(xiàn)：
import { useNavigate } from 'react-router-dom
function Register () {
const navigate = useNavigate()
return (
<div>
<Form afterSubmit={() => navigate('/')} />
</div>
)
}4. 通過(guò)路由傳遞狀態(tài)
在 react-router-dom 中可以通過(guò)以下三種方式來(lái)傳遞狀態(tài)：
- 使用 Link 組件
- 使用 Navigate 組件
- 使用 useNavigate 鉤子
（1）Link
下面來(lái)使用 Link 組件通過(guò) state props 來(lái)將數(shù)據(jù)從產(chǎn)品頁(yè)面?zhèn)鬟f到主頁(yè)：
import React from "react";
import { Link } from "react-router-dom";
function Contact() {
return (
<div>
<header>產(chǎn)品頁(yè)面</header>
<Link to="/" state={"From Product"}>
返回
</Link>
</div>
);
}
export default Contact;現(xiàn)在我們就將需要的數(shù)據(jù)傳遞出來(lái)了，那該如何在首頁(yè)獲取從產(chǎn)品頁(yè)面?zhèn)鬟f出來(lái)的數(shù)據(jù)呢？可以在接收信息的頁(yè)面（首頁(yè)）中使用一個(gè)名為 useLocation 的鉤子來(lái)獲取數(shù)據(jù)：
import { useLocation } from "react-router-dom";
import "./styles.css";
export default function Settings() {
let location = useLocation();
return (
<div className="App">
<header>首頁(yè)</header>
<p>{location.state}</p>
</div>
);
}當(dāng)在產(chǎn)品頁(yè)面點(diǎn)擊返回時(shí)，就會(huì)跳轉(zhuǎn)到首頁(yè)，并且首頁(yè)顯示了從產(chǎn)品頁(yè)面?zhèn)鬟f出來(lái)的數(shù)據(jù)：
（2）Navigate
Navigate 組件也可以在 react-router-dom 中傳遞狀態(tài)，其使用方式和 Link 組件類似。假如當(dāng)點(diǎn)擊關(guān)于按鈕時(shí)，跳轉(zhuǎn)到首頁(yè)，并告訴首頁(yè)該跳轉(zhuǎn)是從哪個(gè)頁(yè)面來(lái)的：
<Route path="/about" element={<Navigate to="/" state={"From About"} />} />在首頁(yè)中仍然是使用 useLocation 鉤子來(lái)獲取狀態(tài)值：
import { useLocation } from "react-router-dom";
import "./styles.css";
export default function Settings() {
let location = useLocation();
return (
<div className="App">
<header>首頁(yè)</header>
<p>{location.state}</p>
</div>
);
}當(dāng)在首頁(yè)點(diǎn)擊“關(guān)于”時(shí)，就會(huì)重定向到首頁(yè)，并且首頁(yè)中會(huì)顯示 From About：
（3）useNavigate
上面我們介紹了如何使用 useNavigate 鉤子來(lái)進(jìn)行重定向，在調(diào)用 navigate() 函數(shù)時(shí)，給它傳遞了一個(gè)參數(shù)，即要重定向的路徑。實(shí)際上，navigate() 函數(shù)接受兩個(gè)參數(shù)，第一個(gè)參數(shù)就是跳轉(zhuǎn)的路徑，第二個(gè)參數(shù)是包含狀態(tài)的對(duì)象。可以借助 useNavigate Hook 來(lái)實(shí)現(xiàn)狀態(tài)傳遞：
import { useNavigate } from 'react-router-dom
function Register () {
const navigate = useNavigate()
return (
<div>
<Form afterSubmit={() => navigate('/', { state: "From the About Page"})} />
</div>
)
}在首頁(yè)中仍然是使用 useLocation 鉤子來(lái)獲取狀態(tài)值，和上面兩種方式一樣，這里不再多介紹。
5. 動(dòng)態(tài)路由
一個(gè)很常見(jiàn)的場(chǎng)景，在維基百科進(jìn)行搜索時(shí)，URL 的模式始終是一樣的，如下：
https://zh.wikipedia.org/wiki/{keyword}這里的 keyword 就是我們?cè)诰S基百科中搜索的內(nèi)容，這個(gè)內(nèi)容是不固定的，并且有很多很多，我們不可能為每個(gè)關(guān)鍵詞都創(chuàng)建一個(gè)路由。其實(shí)，只需要聲明一個(gè)帶有 keyword 占位符的路由即可。對(duì)于上面的例子，只需要將 Route 組件的 path props 聲明為這樣：
<Route path="/wiki/:keyword" element={<Wiki />} />這時(shí)，無(wú)論是訪問(wèn)/wiki/javascript還是/wiki/react，都會(huì)加載 Wiki 組件。
那我們?cè)撊绾卧诮M件中訪問(wèn) URL 中的動(dòng)態(tài)部分呢？從 v5.1 開(kāi)始，React Router 就提供了一個(gè) useParams Hook，它返回一個(gè)對(duì)象，該對(duì)象具有 URL 參數(shù)及其值之間的映射。使用方式如下：
import React from 'react'
import {useParams} from 'react-router';
function Wiki() {
const { keyword } = useParams()
return (
<div>{ keyword }</div>
)
}這樣，通過(guò)獲取到的 URL 參數(shù)，就可以請(qǐng)求頁(yè)面對(duì)應(yīng)的數(shù)據(jù)。
6. 嵌套路由
嵌套路由允許父路由充當(dāng)包裝器并控制子路由的渲染。比如，在應(yīng)用中點(diǎn)擊消息時(shí)，會(huì)跳轉(zhuǎn)到 /messages 路由，并顯示所有的通知列表。當(dāng)點(diǎn)擊某一條消息時(shí)，就會(huì)跳轉(zhuǎn)到 /messages/:id 路由，這時(shí)就能看到指定 id 的消息詳情，同時(shí)消息列表是顯示在左側(cè)的。這個(gè)場(chǎng)景就要依賴嵌套路由來(lái)實(shí)現(xiàn)。下面來(lái)看看如何使用 React Router 實(shí)現(xiàn)這種嵌套路由模式。
從最基礎(chǔ)的結(jié)構(gòu)開(kāi)始定義：
function App() {
return (
<Routes>
<Route path="/" element={<Home />} />
<Route path="/messages" element={<Messages />} />
<Route path="/settings" element={<Settings />} />
</Routes>
);
}現(xiàn)在，我們希望 Messages 能夠控制渲染子路由，那能不能直接在 Messages 組件中來(lái)定義子路由呢？就像這樣：
function Messages() {
return (
<div>
<Conversations />
<Routes>
<Route path=":id" element={<MessagesDetails />} />
</Routes>
</div>
);
}現(xiàn)在，當(dāng)用戶導(dǎo)航到 /messages 時(shí)， React Router 會(huì)呈現(xiàn) Messages 組件。Messages 組件中通過(guò) Conversations 組件來(lái)顯示消息列表，然后使用將 /messages/:id 映射到 Chat 組件的 Route 來(lái)渲染另一個(gè) Routes。
注意： 這里不必在嵌套路由中包含完整的 /messages/:id 路徑，因?yàn)?nbsp;Routes 是很智能的，當(dāng)省略了前導(dǎo) /，就會(huì)認(rèn)為這條路徑是相對(duì)于父級(jí) /messages 的。
這樣，只有在跳轉(zhuǎn)到/Messages時(shí)才會(huì)渲染消息列表。當(dāng)訪問(wèn)與 /messages/:id 模式匹配的路由時(shí)，消息列表就消失了，嵌套路由永遠(yuǎn)不被會(huì)渲染。
為了解決這個(gè)問(wèn)題，我們需要告訴 React Router 想要在路由為 /messages 時(shí)或者為任何其他匹配 /messages/* 模式的路由時(shí)要渲染消息列表。
那如果只是將路徑修改為 /messages/*會(huì)怎樣呢？
function App() {
return (
<Routes>
<Route path="/" element={<Home />} />
<Route path="/messages/*" element={<Messages />} />
<Route path="/settings" element={<Settings />} />
</Routes>
);
}這樣做的確生效了，無(wú)論是導(dǎo)航到 /messages 還是 /messages/:id，都能正常加載消息列表組件：
通過(guò)將 /* 附加到 /messages 路徑的末尾，實(shí)際上是在告訴 React Router，Messages 有一個(gè)嵌套的 Routes 組件。并且父路徑應(yīng)該匹配 /messages 以及與 /messages/* 匹配的任何其他路由。
當(dāng)我們希望在子 Route 控制渲染嵌套路由時(shí)，這是有效的。但是如果我們希望在 App 組件包含創(chuàng)建嵌套路由所需的所有信息，而不是必須在 Messages 組件中定義呢？React Router 也是支持這種創(chuàng)建嵌套路由的方式：
function App() {
return (
<Routes>
<Route path="/" element={<Home />} />
<Route path="/messages" element={<Messages />}>
<Route path=":id" element={<MessagesDetails />} />
</Route>
<Route path="/settings" element={<Settings />} />
</Routes>
);
}這里以聲明式的方式將子 Route 嵌套為父 Route 的子級(jí)。和上面一樣，子路由是相對(duì)于父路由的，因此不需要包含父 (/messages) 路徑。
現(xiàn)在，只需要告訴 React Router 應(yīng)該在父路由（Messges）中的哪個(gè)位置渲染子路由（MessagesDetails）。這就就需要使用 React Router 的 Outlet 組件：
import { Outlet } from "react-router-dom";
function Messages() {
return (
<div>
<Conversations />
<Outlet />
</div>
);
}如果應(yīng)用的路由與嵌套 Route 的路徑匹配，Outlet 組件就會(huì)渲染 Route 的元素。根據(jù)上面的 Routes，如果在當(dāng)前的路由是 /messages，Outlet 組件將渲染為 null；如果當(dāng)前的路由是 /messages/1，Outlet 組件將渲染 <MessagesDetails /> 組件。
7. 查詢參數(shù)
在 React Router 中，如何從 URL 中獲取參數(shù)呢？例如以下 URL：
twitter.com/search?q=react&src=typed_query&f=live從 v6 開(kāi)始，React Router 使用 URLSearchParams API 來(lái)處理查詢字符串，URLSearchParams 內(nèi)置于所有瀏覽器（IE 除外）中，并提供了處理查詢字符串的實(shí)用方法。當(dāng)創(chuàng)建 URLSearchParams 實(shí)例時(shí)，需要向它傳遞一個(gè)查詢字符串：
const queryString = "?q=react&src=typed_query&f=live";
const sp = new URLSearchParams(queryString);
sp.has("q"); // true
sp.get("q"); // react
sp.getAll("src"); // ["typed_query"]
sp.get("nope"); // null
sp.append("sort", "ascending");
sp.toString(); // "?q=react&src=typed_query&f=live&sort=ascending"
sp.set("q", "bytes.dev");
sp.toString(); // "?q=bytes.dev&src=typed_query&f=live&sort=ascending"
sp.delete("sort");
sp.toString(); // "?q=bytes.dev&src=typed_query&f=live"React Router 提供了一個(gè)自定義的 useSearchParams Hook，它是基于 URLSearchParams 進(jìn)行的封裝。useSearchParams 返回一個(gè)數(shù)組，該數(shù)組第一個(gè)元素是 URLSearchParams 的實(shí)例，第二個(gè)元素是更新查詢參數(shù)的一個(gè)方法。
對(duì)于上面的 URL，使用 useSearchParams 從查詢字符串中獲取值：
import { useSearchParams } from 'react-router-dom'
const Results = () => {
const [searchParams, setSearchParams] = useSearchParams();
const q = searchParams.get('q')
const src = searchParams.get('src')
const f = searchParams.get('f')
return (
// ...
)
}如果需要更新查詢字符串，可以使用 setSearchParams，向它傳遞一個(gè)對(duì)象，該對(duì)象的key/value 對(duì)將作為 &key=value 添加到 url：
const Results = () => {
const [searchParams, setSearchParams] = useSearchParams();
const q = searchParams.get('q')
const src = searchParams.get('src')
const f = searchParams.get('f')
const updateOrder = (sort) => {
setSearchParams({ sort })
}
return (
...
)
}8. Route 配置
React Router v6 內(nèi)置了一個(gè) useRoutes Hook，它在功能上等同于 <Routes>，但它是使用 JavaScript 對(duì)象而不是 <Route> 元素來(lái)定義路由。這個(gè)對(duì)象具有與普通 <Route> 元素相同的屬性，但它們不需要使用 JSX 來(lái)編寫。
useRoutes 的返回值要么是一個(gè)有效的 React 元素（可以使用它來(lái)渲染路由樹(shù)），如果沒(méi)有匹配項(xiàng)，則返回 null。
假如應(yīng)用中有以下路徑：
/
/invoices
:id
pending
complete使用 <Route> 組件來(lái)定義路由將會(huì)是這樣的：
export default function App() {
return (
<div>
<Navbar />
<Routes>
<Route path="/" element={<Home />} />
<Route path="/invoices" element={<Invoices />}>
<Route path=":id" element={<Invoice />} />
<Route path="pending" element={<Pending />} />
<Route path="complete" element={<Complete />} />
</Route>
</Routes>
</div>
);
}而 useRoutes 是利用 JavaScript 對(duì)象完成的，而不是使用 React 元素 (JSX) 來(lái)聲明路由。定義形式如下：
import { useRoutes } from "react-router-dom";
const routes = useRoutes([
{ path: "/", element: <Home /> },
{
path: "/invoices",
element: <Invoices />,
children: [
{ path: ":id", element: <Invoice /> },
{ path: "/pending", element: <Pending /> },
{ path: "/complete", element: <Complete /> },
],
},
]);
export default function App() {
return (
<div>
<Navbar />
{routes}
</div>
);
}
