目錄

參數獲取

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進行跳轉。

?

?

總結

以上是生活随笔為你收集整理的react-router-dom@6获取路由传参的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。