参数获取

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获取路由传参相关推荐

react路由传参问题
之前在工作中开发一个react项目的时候遇到路由传参的问题,当时因为基础不好,解决这个问题用了好久,还产生了一个bug,特此记录一下. 项目中路由跳转使用的是hashRouter,由于是详情页面跳到审 ...
Vue：路由传参的三种方式
文章目录前言方式一:params 传参(显示参数) 1.声明式 router-link 2.编程式 this.$router.push 方式二:params 传参(不显示参数) 1.声明式 rou ...
react更改路由入参_JavaScript基础教程 react router路由传参
本篇教程介绍了JavaScript基础教程 react router路由传参,希望阅读本篇文章以后大家有所收获,帮助大家对JavaScript的理解更加深入. < 今天,我们要讨论的是react ...
几个经常用到的angular路由Router、ActivatedRoute 知识点：嵌套路由、路由跳转、路由传参、路由参数获取
深度玩家可移步Angular - 常见路由任务 1.嵌套路由 const routes: Routes = [{path: 'first',component: FirstComponent,//同步 ...
react路由嵌套路由及路由传参
因为react的嵌套路由跟vue比就像屎一样不好写所以在使用的时候建议使用react-router-config来配置路由会相对轻松第一步先安装路由依赖 yarn add react-rou ...
React通过url传参和通过路由传参
是基于我写的上一篇文章<用react的路由写一个简单的导航>上面扩展出来的,朋友们可以去康康. 通过url传参的方法有: 1)直接? 接收:this.props.location.sear ...
react更改路由入参_react怎么路由传参？
react路由传参(4种方式) 1.通过params传参(刷新页面后参数不消失,参数会在地址栏显示) 路由页面: //注意要配置 /:id 路由跳转并传递参数:链接方式:XX //或: XXjs方式: ...
react路由传参的几种方式
第一种传参方式,动态路由传参 <Link to='/home/dx'>首页</Link><Route path="/home/:name" compo ...
react路由：路由传参params、search、state
react路由:路由传参params.search.state(含二级路由和三级路由) 一.准备工作: 1.创建myProject05-router目录 2.创建清单文件, npm init ...

react-router-dom@6获取路由传参

参数获取

1、子路由形式携带

2、问号(?)形式参数

3、事件跳转传参

react-router-dom@6获取路由传参相关推荐

最新文章

热门文章