React Router同时传递search与state

最新推荐文章于 2024-01-06 11:15:13 发布

HarryWg

最新推荐文章于 2024-01-06 11:15:13 发布

阅读量230

点赞数

分类专栏：前端文章标签： react.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_43596764/article/details/129744883

版权

前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

问题

在React Router中，无法直接同时传递search与state。下面代码中，使用对象的形式定义to属性，在pathname中加入search，同时添加state属性。

<MyNavLink to={{pathname:'/b/content/bc?id=02', state:{isMarked: 1}}}>go to /b/b</MyNavLink>

下方输出了目标路由组件的this.props，在location属性中我们可以看到，url中的search部分并没有被识别为search属性，而是作为pathname的一部分，因此用解析search的方法进行属性提取。
在这里插入图片描述

解决方案

使用对象形式定义to属性时，可以添加query属性，如下代码所示

<MyNavLink to={{pathname:'/b/content/bc', query: {id: '02'}, state:{isMarked: 1}}}>go to /b/b</MyNavLink>

此时，location属性中就出现了query属性，其中存放着我们需要传递的数据
在这里插入图片描述

总结

个人认为，由于state与params、search的最大区别就在于可见性，state可以不将数据传递暴露于url中，因此开发中大概率不会混用state与params、search，因此React Router没有设计同时传递search和state的逻辑。另一方面，query是数据不暴露在url中的search，因此同时使用query与state更符合统一的设计逻辑。