路由传值的三种方式(v5.x)

params参数
//路由链接(携带参数):
<Link to='/demo/test/tom/18'}>详情</Link>
//或 <Link to={{ pathname:'/demo/test/tom/18' }}>详情</Link> //注册路由(声明接收):
<Route path="/demo/test/:name/:age" component={Test}/> //接收参数:
this.props.match.params
search参数
//路由链接(携带参数):
<Link to='/demo/test?name=tom&age=18'}>详情</Link> //注册路由(无需声明,正常注册即可):
<Route path="/demo/test" component={Test}/> //接收参数:
this.props.location.search //备注:获取到的search是urlencoded编码字符串(例如: ?id=10&name=zhangsan),需要借助query-string解析参数成对象
state参数
//路由链接(携带参数):
<Link to={{pathname:'/demo/test',state:{name:'tom',age:18}}}>详情</Link> //注册路由(无需声明,正常注册即可):
<Route path="/demo/test" component={Test}/> //接收参数:
this.props.location.state //备注:刷新也可以保留住参数

路由传值的三种方式(v6.x)

params参数
//路由链接(携带参数):
<Link to={{ pathname:`/b/child1/${id}/${title}` }}>Child1</Link>
//或 <Link to={`/b/child1/${id}/${title}`}>Child1</Link> //注册路由(声明接收):
<Route path="/b/child1/:id/:title" component={Test}/> //接收参数:
import { useParams } from "react-router-dom";
const params = useParams();
//params参数 => {id: "01", title: "消息1"}
search参数
//路由链接(携带参数):
<Link className="nav" to={`/b/child2?age=20&name=zhangsan`}>Child2</Link> //注册路由(无需声明,正常注册即可):
<Route path="/b/child2" component={Test}/> //接收参数方法1:
import { useLocation } from "react-router-dom";
import qs from "query-string";
const { search } = useLocation();
//search参数 => {age: "20", name: "zhangsan"} //接收参数方法2:
import { useSearchParams } from "react-router-dom";
const [searchParams, setSearchParams] = useSearchParams();
// console.log( searchParams.get("id")); // 12 //备注:获取到的search是urlencoded编码字符串(例如: ?age=20&name=zhangsan),需要借助query-string解析参数成对象
state参数
//通过Link的state属性传递参数
<Link
className="nav"
to={`/b/child2`}
state={{ id: 999, name: "i love merlin" }}
>
Child2
</Link> //注册路由(无需声明,正常注册即可):
<Route path="/b/child2" component={Test}/> //接收参数:
import { useLocation } from "react-router-dom";
const { state } = useLocation();
//state参数 => {id: 999, name: "我是梅琳"} //备注:刷新也可以保留住参数

兄弟姐妹们,点波关注吧,一起分享有趣的技术!

掘金https://juejin.cn/user/3034307824456296/posts 全部原创好文

CSDNhttps://blog.csdn.net/qq_42753705?type=lately 全部原创好文

简书https://www.jianshu.com/u/460b662a00d1 全部原创好文

segmentfault 思否https://segmentfault.com/u/jasonma1995/articles 全部原创好文

博客园https://www.cnblogs.com/Jason1995/ 全部原创好文

React中使用 react-router-dom 路由传参的三种方式详解【含V5.x、V6.x】!!!的更多相关文章

  1. vue路由传参的三种方式区别(params,query)

    最近在做一个项目涉及到列表到详情页的参数的传递,网上搜索一下路由传参,结合自己的写法找到一种适合自己的,不过也对三种写法都有了了解,在此记录一下 <ul class="table_in ...

  2. vue路由传参的三种方式以及解决vue路由传参页面刷新参数丢失问题

    最近项目中涉及到跨页面传参数和后台进行数据交互,看到需求之后第一反应就是用路由传参来解决:Vue中给我们提供了三种路由传参方式,下面我们一个一个的来看一下: 方法一:params传参: this.$r ...

  3. Vue-router路由传参的三种方式

    本文简单介绍下三种路由传参: (1)在路由中配置 { path : ‘/home/:id’, name : ‘Dome’, component } 然后写调用的时候 this.$router.push ...

  4. vue里面路由传参的三种方式

    1.方式一 通过query的方式也就是?的方式路径会显示传递的参数 HTML的方式<router-link :to="{name:xxx,query:{page:1,code:8899 ...

  5. vue路由传参的三种方式

    方式一 通过query方式传参 这种情况下 query传递的参数会显示在url后面 this.$router.push({ path: '/detail', query: { id: id } }) ...

  6. React路由传参的三种方式

    方式 一:          通过params         1.路由表中                     <Route path=' /sort/:id '   component= ...

  7. vue 路由传参中刷新页面参数丢失 及传参的几种方式?

    在页面跳转中,我通过路由传参,结果发现页面参数丢失了.路径返回了根目录.... 1. 先说下路由传参的几种方式吧? 比如:<div v-for="item in items" ...

  8. Vue路由传参的几种方式

    原 Vue路由传参的几种方式 2018年07月28日 23:52:40 广积粮缓称王 阅读数 12613   前言:顾名思义,vue路由传参是指嵌套路由时父路由向子路由传递参数,否则操作无效.传参方式 ...

  9. react-绑定this并传参的三种方式

    绑定this并传参的三种方式 在事件中绑定this并传参: <input type="button" value="在事件中绑定this并传参" onCl ...

随机推荐

  1. nrf52810/52832开发板能跑,自己的PCB不能跑的原因

    1.PCB图片对比 这是我的开发板原理图: 这是我画的PCB原理图: 发现其实开发板上就是比我的多了两个外部晶振. 例程代码一般都是用外部晶振作为时钟,所以用例程的代码跑不通我的PCB. 2.解决办法 ...

  2. Rainbond通过插件整合SkyWalking,实现APM即插即用

    作者:张震 一. 简介 SkyWalking 是一个开源可观察性平台,用于收集.分析.聚合和可视化来自服务和云原生基础设施的数据.支持分布式追踪.性能指标分析.应用和服务依赖分析等:它是一种现代 AP ...

  3. C# 将Excel转为PDF时自定义表格纸张大小

    通过后端程序将Excel表格转为PDF格式时,直接转换后的PDF效果可能出现表格页面过小或者过大,导致页面内容分布不均.要改善转换后的文档效果,只需在转换前自定义表格纸张大小,即可调整转换后的PDF页 ...

  4. .net core 3.1 WebAPi 使用 AutoMapper 9.0、10.0

    AutoMapper 可以很方便完成数据对象之间的转换. Dto -> Entity Entity -> ViewModel Step 1:通过 NuGet 安装 AutoMapper 的 ...

  5. Codeforces 700D - Huffman Coding on Segment(莫队+根分)

    Codeforces 题目传送门 & 洛谷题目传送门 好家伙,刚拿到此题时我连啥是 huffman 编码都不知道 一种对 \(k\) 个字符进行的 huffman 编码的方案可以看作一个由 \ ...

  6. 洛谷 P6177 - Count on a tree II/【模板】树分块(树分块)

    洛谷题面传送门 好家伙,在做这道题之前我甚至不知道有个东西叫树分块 树分块,说白了就是像对序列分块一样设一个阈值 \(B\),然后在树上随机撒 \(\dfrac{n}{B}\) 个关键点,满足任意一个 ...

  7. azkaban执行任务长时间无法结束

    问题显示: 由于一次执行较多的任务,导致azkaban的web程序崩溃,此时,关闭azkaban服务,重新启动azkaban 但是由于azkaban的exec程序无法关闭,这里采用kill的方式关掉e ...

  8. Scrapy框架延迟请求之Splash的使用

    Splash是什么,用来做什么 Splash, 就是一个Javascript渲染服务.它是一个实现了HTTP API的轻量级浏览器,Splash是用Python实现的,同时使用Twisted和QT.T ...

  9. echo 输出彩色字符

    借助echo的-e选项来实现,语法格式为 echo -e "\033[3xmsome things you want to print out.\033[0m" \033[3xm为 ...

  10. LATEX公式语法

    see how any formula was written in any question or answer, including this one, right-click on the ex ...