目錄

參數獲取

1、子路由形式攜帶

2、問號(?)形式參數

3、事件跳轉傳參

---

router/index.tsx

import App from "App";
import Home from "pages/Home";
import List from "pages/List";
import Detail from "pages/Detail";
import About from "pages/About";
import Login from "pages/Login";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";const MyRouter = () => (<Router><Routes><Route path="/" element={<App />}><Route index element={<Home />}></Route><Route path="/list/" element={<List />}></Route><Route path="/list/:id" element={<List />}></Route><Route path="/detail" element={<Detail />}></Route><Route path="/about" element={<About />}></Route></Route><Route path="/login" element={<Login />}></Route></Routes></Router>
);export default MyRouter;

App.tsx

import React from "react";
import { Outlet, Link } from "react-router-dom";function App() {return (<div><ul><li><Link to={"/list"}>列表頁(不帶id)</Link></li><li><Link to={"/list/456"}>列表頁(帶id)</Link></li><li><Link to={"/detail?id=123"}>詳情頁</Link></li><li><Link to={"/about"}>關于我們</Link></li></ul><Outlet /></div>);
}export default App;

參數獲取

1、子路由形式攜帶

如上面代碼的點擊列表頁帶id?"/list/456" 跳轉列表頁

<Route path="/list/:id" element={<List />}></Route>

此時可以使用React Router Dom提供的Hook? useParams? 在列表頁獲取：

List.tsx

import React from "react";
import { useParams } from "react-router-dom";export default function List() {const { id } = useParams();return (<div><h1>列表 - id: {id}</h1><h1>yusir</h1></div>);
}

2、問號(?)形式參數

<Link to={"/detail?id=123"}>詳情頁</Link>

點擊攜帶參數進入詳情頁

此時可以使用React Router Dom提供的Hook? useSearchParams 在詳情頁獲取：

Detail.tsx

import React from "react";
import { useSearchParams } from "react-router-dom";export default function Detail() {const [params] = useSearchParams();console.log(params.getAll('id'))    // ['123']let myId = params.getAll("id")[0];return (<div><h1>Detail - id: {myId}</h1><h1>yusir</h1></div>);
}

3、事件跳轉傳參

事件中執行跳轉頁面，可以使用useNavigate這個hook進行跳轉。

?

?