1.BrowserRouter
要放在最頂層，即所有組件的最外面;可以定義別名
2.Routes
包括相對路由和鏈接、自動路由排名、嵌套路由和布局等功能
3.路由跳轉
"/"開頭為絕對路由，否則為相對路由
4.Route
負責渲染React組件的UI
1）path屬性
始終與應用程序當前的URL匹配
2）element屬性
當遇到當前URL時，會告訴Route組件渲染哪個React組件
Demo中的情況：
<Route path="/" element={<Father />}>
5.Link
添加一個導航欄 相當於HTML中的a標簽 只能在Router內部使用
Demo中的情況：
<Link to="login" style={{ padding: 10 }}>
6.編程式跳轉(useNavigate)
使用useNavigate鈎子函數生成navigate對象，可以通過js代碼完成路由跳轉
Demo中的情況：
const navigate = useNavigate();
<button onClick={() => navigate('/')}>點擊跳轉回首頁</button>
7. 路由傳參的三種方式
1)動態路由參數(讀取URL參數) 關鍵字：Params
在Route組件中的path屬性中定義路徑參數；在組件內通過useParams hook訪問路徑參數
Demo中的情況：
路由中：
<Route path="/user" element={<User />}></Route>
<Route path="/user/detail/:id" element={<Detail />}></Route>
detail文件中：
const params = useParams();
<h3>此時是用戶{params.id}</h3>
user文件中：
<Link to="detail/1"></Link>
通常用在組件呈現時獲取數據：
function Invoice() {
let { invoiceId } = useParams();
let invoice = useFakeFetch(`/api/invoices/${invoiceId}`);
return invoice ? (
<div>
<h1>{invoice.customerName}</h1>
</div>
) : (
<Loading />
);
}
2）search參數
查詢參數不需要在路由中定義
使用useSearchParams hook來訪問查詢參數，用法與useState類似，會返回當前對象和更改他的方法
更改searchParams時，必須傳入所有查詢參數，否則會覆蓋已有參數
//路由鏈接(攜帶參數)：
<Link className="nav" to={`/b/child2?age=20&name=zhangsan`}>Child2</Link>
//接收參數方法：
import { useSearchParams } from "react-router-dom";
const [searchParams, setSearchParams] = useSearchParams();
console.log( searchParams.get(“age”)); // 20
3）state參數
//通過Link的state屬性傳遞參數
<Link
className="nav"
to={`/b/child2`}
state={{ id: 999, name: "i love merlin" }} //要傳遞的參數寫在此處
>
Child2
</Link>
//接收參數：
import { useLocation } from "react-router-dom";
const { state } = useLocation();
//state參數 => {id: 999, name: "i love merlin"}
//刷新也可以保留參數
8.嵌套路由
通過嵌套的書寫Route組件 實現對嵌套路由的定義
在父組件中使用Outlet來顯示匹配到的子組件，目的是作為子路由的出口
Demo中的情況：
父組件：<Outlet />
路由：嵌套路由的形式
<Route path="home" element={<Home />}>
<Route path="homeSpan" element={<HomeSpan />}></Route>
<Route path="HomeDiv" element={<HomeDiv />}></Route>
</Route>
9.默認路由
在嵌套路由中，如果URL僅匹配了父級URL，則Outlet中會顯示帶有index屬性的路由
Demo中的情況：
<Route index element={<Default />}></Route>
10.全匹配路由
path值取“*”時，可以匹配任何(非空)路徑，但他的優先級是最低的，一般用來設置404界面
Demo中的情況：
<Route path="*" element={<NotFound />}></Route>
11.多組路由
通常一個應用中只有一個Routes組件，但是根據實際需求也可以定義多個路由出口(比如側邊欄和主頁面都要隨URL變化)
<Router>
<SideBar>
<Routes>
<Route></Route>
</Routes>
</SideBar>
<Main>
<Routes>
<Route></Route>
</Routes>
</Main>
</Router>
12.重定向(Navigate)
當前在a，想重定向到b，可以通過Navigate組件進行重定向到其他路徑
import { Navigate } from 'react-router-dom';
function A(){
return (
<Navigate to="/b" />
)
}
13.后裔路由(Descendant)
在父路由路徑的末尾放置一個 *，可以避免當 URL 長於父路由的路徑時，父路由與 URL 不匹配，影響后代路由的顯示
官網示例：
function App() {
return (
<Routes>
<Route path="/" element={<Home />} />
<Route path="dashboard/*" element={<Dashboard />} />
</Routes>
);
}
function Dashboard() {
return (
<div>
<p>Look, more routes!</p>
<Routes>
<Route path="/" element={<DashboardGraphs />} />
<Route path="invoices" element={<InvoiceList />} />
</Routes>
</div>
);
}
Demo地址：https://stackblitz.com/edit/react-xlsspr?file=src%2FPages%2FUser.js