react-router-dom@6获取路由传参
2022/1/11 23:11:00
本文主要是介绍react-router-dom@6获取路由传参,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
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> ); }
这篇关于react-router-dom@6获取路由传参的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-05-09vue3开发前端表单缓存自定义指令,移动端h5必备插件
- 2024-05-09React Hooks在class组件中的使用方式
- 2024-03-30[OIDC in Action] 2. 基于OIDC(OpenID Connect)的SSO(纯JS客户端)
- 2024-03-29terraform jsonencode
- 2024-03-13vuex-persist
- 2024-03-11icons for vue
- 2024-03-07breadcrumbs react js
- 2024-03-06react login page example
- 2024-03-06react router uselocation
- 2024-03-04postgres jsonb_set