React-Router 路由传参的几种方式

最新推荐文章于 2024-08-08 10:24:48 发布
最新推荐文章于 2024-08-08 10:24:48 发布
阅读量1.4k 收藏
点赞数
分类专栏： react
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq799028706/article/details/109297432
版权

1.get传值

路由配置还是普通的配置，如：‘admin’

传参方式如：‘admin?id=‘1111’’

通过this.props.location.search获取url获取到一个字符串’?id=‘1111’

我们可以用url，qs，querystring，浏览器提供的api URLSearchParams对象（do not need to support IE and do not contain array or object）或者自己封装的方法去解析出id的值。

2.动态路由传值

路由需要配置成动态路由：如path=’/admin/:id’

传参方式，如’admin/111’

通过this.props.match.params.id 取得url中的动态路由id部分的值，除此之外还可以通过useParams（Hooks）来获取

3.通过query或state传值

传参方式如：在Link组件的to属性中可以传递对象{pathname:’/admin’,query:‘111’,state:‘111’};

通过this.props.location.state或this.props.location.query来获取即可，传递的参数可以是对象、数组等，但是存在缺点就是一刷新页面，参数就会丢失

zzzmj_
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
react-router 路由传参
逆风飞翔的代码狗
07-13 938
路由传递参数 我们知道前端想后台传递参数有两种方式： 一种是直接将参数放在地址栏里面传递，这里又有两种方式： /home?name=fly&age=18和/home/fly/18 另外一种方式是将参数放在body里面传递 这里针对第一种的两个传递方式： App.js export default class App extends Component { render() { return ( <Router> <Link t
React.js学习（十）、路由传参
黄孝果的博客
02-26 384
一、向路由组件传递params参数 render() { const {messageArr} = this.state return ( <div> <ul> { messageArr.map((msgObj)=>{ return (
router.replace携带参数不一致
最新发布
weixin_57263939的博客
08-08 284
不通过页面按钮点击，从浏览器后退按钮返回A模拟手机返回上一页。因为用户列表通过主页进入的，在卸载时调用push会导致无法返回到主页，所以需要调用replace方法。H5在用户列表页面a选择用户后，进入用户详情界面b，在返回时携带修改后的参数，但是在a页面参数并没有及时获取到。可以看到，a.vue中的onBeforeRouteUpdate的to可以正确的获取到query参数。可以看到，不管是地址栏还是页面，参数都是存在的，但是打印是空对象。使用onBeforeRouteUpdate。
react-router之参数传递
youhebuke225的博客
05-19 922
https://blog.csdn.net/big_sun_962464/article/details/122462212 例子 import { Routes, Route, useNavigate, NavLink,useParams, Link,Outlet,useSearchParams,useLocation } from "react-router-dom"; import React,{ useEffect } from "react"; export default function A
React学习笔记 -- 组件通信之路由传参（react-router-dom）
2301_82244343的博客
04-13 991
面试题千万不要死记，一定要自己理解，用自己的方式表达出来，在这里预祝各位成功拿下自己心仪的offer。需要完整面试题的朋友可以点击蓝色字体获取面试题千万不要死记，一定要自己理解，用自己的方式表达出来，在这里预祝各位成功拿下自己心仪的offer。需要完整面试题的朋友可以点击蓝色字体获取[外链图片转存中…(img-Gjq9F1E6-1712952003892)][外链图片转存中…(img-lDmfIYzh-1712952003893)]
react-router 路由传参
weixin_42331327的博客
01-10 219
react 路由传参的方式 基础代码示例： // 1.安装react-router-dom // npm install react-router-dom --save // 子组件 Hot import React,{Component} from "react" export default class Hot extends Component{ render(){ ...
react-router V6路由配置等例子 1. 路由传参几种方式等例子 2. 路由表配置
09-17
react-router V6路由配置等例子 1. 路由传参几种方式等例子 2. 路由表配置 3. useRoutes钩子的使用 4. 数据路由 createBrowserRouter API + RouterProvider 组件 的使用
关于react-router的几种配置方式详解
12-09
本文介绍关于react-router的几种配置方式详解，分享给大家，具体如下： 路由的概念 路由的作用就是将url和函数进行映射，在单页面应用中路由是必不可少的部分，路由配置就是一组指令，用来告诉router如何匹配url，...
React的路由——react-router-dom
m0_48982503的博客
11-15 856
安装 cnpm i react-router-dom -S； npm i react-router-dom -S 引入 hash路由：HashRouter import { HashRouter } from 'react-router-dom' history路由：BrowserRouter import { HistoryRouter } from 'react-router-dom' 注意 路由的所有配置项必须在HashRouter...
React路由 | 介绍几种常用的react-router-v5的方法
湫一
06-23 4578
使用 react-router 来进行页面跳转是我们学习react的基本功。笔者最近上手react 不久，也必然遇到了使用 react-router来跳转的几种情景。所以结合个人的项目时间，就写就本文，当作是一个总结。 本文主要关注以下几种场景： 通过手动修改url进行路由跳转； 对页面局部组件进行切换和跳转； 为了变更顶层页面组件，进行跳转； 对于无法匹配的资源，进行跳转到 404 页面； 分...
react-router-dom路由传参及获取方法
05-30
React Router Dom 提供了多种传递参数的方式，以下是其中几种常用的方法： 1. Query Parameters 通过 URL 上的查询参数传递参数，例如：`/user?id=123&name=John`。在组件中可以通过 `props.location.search` 来...
React-Router传递参数
火星基地
04-19 699
1. params 路由链接（携带参数）：<Link to="/demo/test/tom/18">详情</Link> <Link to={`/home/message/detail/${msgObj.id}/${msgObj.title}`}>{msgObj.title}</Link> 注册路由（声明接收）：<Route path="/demo/test/:name/:age" component={Test} /> <Route
react路由01——react-routerV6 中路由传递参数的几种方式
@素素~的博客
09-14 1387
react路由01——react-routerV6 中路由传递参数的几种方式
react-routerV6 路由传递参数的三种方式
qq_43886365的博客
06-07 5061
react-router V6 传递参数的三种方式： search 传参的方式比较简单，参数的形式以 问号拼接 到地址后面 params 方式传参要求会多一些，需要我们在`路由表配置`的位置添加一个 参数占位 使用state传参时，参数需要放到state对象里面；
react-router路由传参数
读心悦
11-27 3236
通配传参 1、 使用props.params 传值 <Route path="/path/:id" component={App} /> //Link组件，路由跳转，类似于a标签 <Link to="/path/id">list</Link> //子组件中获取参数 this.props.match.params.id 如果需要传对象的话，可先将对象转化为字...
react --- 路由传参的几种方式
weixin_33994429的博客
03-27 3124
1.params 优势 ： 刷新地址栏，参数依然存在缺点:只能传字符串，并且，如果传的值太多的话，url会变得长而丑陋。 2.query 优势：传参优雅，传递参数可传对象；缺点：刷新地址栏，参数丢失 3.state 优缺点同query 4.search 优缺点同params 转载于:https://www.cnblogs.com/yuerdong/...
react路由传值的三种方式
小菜鸟的博客
09-28 925
react路由传值的三种方式 1.parms 参数 入口携带参数 <Link to="/路由地址/路由参数Params"></Link> <Link to="/home/Tom/18"></Link> 出口获取声明接收参数 <Route path="/home/:name/:age" component={Home}> 接收参数（this.props.match.params） search参数 入口携带参数 <Link to="/路由地
React Router路由传参方式总结
weixin_30369041的博客
11-18 117
首先我们要知道一个前提，路由传递的参数我们可以通过props里面的属性来获取。只要组件是被<Router>组件的<component>定义和指派的，这个组件自然就有了props的match，history和location属性。 了解了这个，接下来我们进入正题： 1.动态路由用法一：（：id法） 通过match.params获取参数 <Link ...
react-router如何传参
云中客的博客
11-24 946
通过params传参 /*路由配置页面*/ <Route path="/addPage/:id" component={addPage} /> /*跳转前的页面，点击后跳转的方法*/ goAddPage() { let id = 111 this.props.router.push({ pathname: `/addPage/${id}` }) } 在跳转后的页面中可以通过this.props.router.params得...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值