本篇内容主要讲解“React路由组件传参的三种方式是什么”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“React路由组件传参的三种方式是什么”吧!当点击消息1这个导航链接时，展示下方对应的Detail路由组件，并向这个组件传递params参数（ID，TITLE，CONTENT）信息。向路由组件传递params参数：在路径后面跟上想要传递的值注册路由时，声明接收params参数这样id，title参数就传递给了Detail组件，Detail组件可以通过this.props.match.params拿到参数。Message->index.jsx：Detail->index.jsx:当点击消息1这个导航链接时，展示下方对应的Detail路由组件，并向这个组件传递search参数（ID，TITLE，CONTENT）信息。向路由组件传递search参数：和params的写法有所不同注册路由时，search参数无需声明接收，正常注册路由即可，因为传递search参数的路径里有一个？关键符存在这样id，title参数就传递给了Detail组件，Detail组件可以通过this.props.location.search拿到参数。但是，接收到的参数是一个 urlencoded 格式的（例如 name=tom&age=18 就是urlencoded格式）所以我们需要将 urlencoded格式 转换为一个 对象 的形式，免费云主机域名需要借助一个query-string库。query-string库里有两个方法stringfy()和parse()。Message->index.jsx：Detail->index.jsx:前面学的两个参数给组件传递的信息会在地址栏中展示出来，例如：localhost:3000/home/message/detail/?id=01&title=消息1，这是传递search参数的地址。但是，传递state参数不会在地址栏中显示出来。向路由组件传递state参数：注：这里的to属性要写成一个对象的形式（传递params和search参数都是字符串形式），对象有两个属性分别是：pathname以及state，需要传递的参数就放在state中。注册路由时，search参数无需声明接收，正常注册路由即可。这样id，title参数就传递给了Detail组件，Detail组件可以通过this.props.location.state拿到参数。Message->index.jsx：Detail->index.jsx:有一个问题：当刷新页面，页面内容不会改变，原因是history下保存着state数据，当清除浏览器缓存，重新打开页面，数据会丢失。改为如下代码，页面刷新不会报错。params参数：路由链接（携带参数）：详情注册路由（声明接收）：接收参数： this.props.match.paramssearch参数：路由链接（携带参数）：详情注册路由（无需声明，正常注册即可）：接收参数： this.props.location.search备注：获取到的search是urlencoded编码字符串，需要借助querystring解析。state参数：路由链接（携带参数）：{pathname:‘/demo/test’,state: {name: ‘tom’,age:18}}}>详情注册路由（无需声明，正常注册即可）：接收参数： this.props.location.state备注：如果不用BrowserRouter,刷新保留不住参数，因为BrowserRouter的history里保留了参数信息。到此，相信大家对“React路由组件传参的三种方式是什么”有了更深的了解，不妨来实际操作一番吧！这里是百云主机网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！
这篇文章主要讲解了“go语言能不能做后端”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“go语言能不能做后端”吧！ go语言能做后端。go语言是服务端的编程语言，其方向主要是后端，很适合处理日志、数据打包、虚拟机…
免责声明：本站发布的图片视频文字，以转载和分享为主，文章观点不代表本站立场，本站不承担相关法律责任；如果涉及侵权请联系邮箱：360163164@qq.com举报，并提供相关证据，经查实将立刻删除涉嫌侵权内容。
微信扫一扫 
