react笔记动态路由 get传值

最新推荐文章于 2024-11-25 10:40:41 发布

ooooooMpr

最新推荐文章于 2024-11-25 10:40:41 发布

阅读量570

点赞数

CC 4.0 BY-SA版权

分类专栏： React笔记文章标签： react.js

本文链接：https://blog.youkuaiyun.com/u013470619/article/details/120273176

React笔记专栏收录该内容

15 篇文章

订阅专栏

本文介绍了React中动态路由的概念和使用方法，通过`<Link>`组件传递参数。动态路由允许在URL中附加数据，如`/home/:aid`。在组件中，可以通过`this.props.match.params.aid`获取传递的参数。此外，还讲解了传统的GET方式传递参数，通过URL查询字符串实现，并展示了如何解析这些参数。这两种方式都是在React应用中传递数据的重要手段。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、动态路由

你在网站点击一个商品的时候。跳转到详情页面，可能会需要得到他是拿一个商品传递一个id。

此时便用到了动态路由，动态路由允许在你的router路由后追加数据。

配置你只需要在APP根组件中允许传值通过link标签追加/：[你的数据名]

    <Link to="/home/:aid">home</Link>

这样你就可以在地址后追加你的数据了。

发送在home组件中

<Link to={`detail/${this.state.list[key].id}`}></Link>

传递你需要的参数

获取在详情页组件中

    componentDidMount(){
        console.log(this.props.match.params.aid);
    }

你可以从props获取get方式传的值

2、get方式传值

比较传统的方式通过get 地址栏传值

<Link to={`detail?aid=${this.state.list[key].id}`}></Link

这样就通过get传递了aid

通过地址栏截取方式获取或者

安装url模块

npm install url --save


import url from "url"


//在下面通过

// 注意  这种方法get必须有属性名  如果直接传参数  33   那么将会得到{33:""}
var query=url.parse(this.props.location.search,true).query;
console.log(query)

//这样就得到了 get方式传递的对象  传递多个参数同样生效