React - 路由组件传参

已于 2022-09-05 02:05:10 修改
阅读量499 收藏 2
点赞数
CC 4.0 BY-SA版权
分类专栏： # React__基础 文章标签： react.js
于 2022-09-05 02:02:32 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Jie_1997/article/details/126665824
本文详细介绍了在React中如何使用`params`, `search`和`state`三种方式在路由组件间传递参数。通过实例展示了如何设置路由链接、注册路由以及在目标组件中接收并解析参数。对于`search`传参，还涉及到使用`querystring`库进行URL编码字符串的解析。

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

React - 路由组件传参

  • params传参：类似多级路由方式传递，数据存放在 this.props.match.params 中。
  • search传参：与url的query方式相同，数据存放在this.props.location.search中，格式为urlencode编码字符串。
  • state传参：使用对象的形式传递，数据存放在this.props.location.state中，url不会有变化，通过缓存来保存数据。

向 Detail 路由组件参数：id='01'，title='城市1'

一. params传参

  1. 路由链接（携带参数属性值）

    <Link to='/home/detail/01/城市1'>城市</Link>

  2. 注册路由（携带参数属性名）

    <Route path="/home/detail/:id/:title" component={Detail}></Route>

  3. 接收传递的参数

    const { id, title } = this.props.match.params

  4. params 传参 案例

    Home 路由组件传递传参

    import React, { Component } from "react";
import { Link, Route } from "react-router-dom";
import Detail from "./Detail";
export default class Home extends Component {
  state = {
    messageArr: [
      { id: "01", title: "城市1" },
      { id: "02", title: "城市2" },
      { id: "03", title: "城市3" },
    ],
  };
  render() {
    const { messageArr } = this.state;
    return (
      <div>
        <ul>
          {messageArr.map((mesObj) => {
            return (
              <li key={mesObj.id}>
                {/* 向路由组件传递 params 参数属性值 */}
                <Link to={`/home/detail/${mesObj.id}/${mesObj.title}`}>
                  {mesObj.title}
                </Link>
              </li>
            );
          })}
        </ul>
        <hr />
        {/* 向路由组件传递 params 参数属性名 */}
        <Route path="/home/detail/:id/:title" component={Detail}></Route>
      </div>
    );
  }
}

    Detail 路由组件接收参数

    import React, { Component } from "react";

const detailData = [
  { id: "01", city: "江苏" },
  { id: "02", city: "安徽" },
  { id: "03", city: "上海" },
];
export default class Detail extends Component {
  render() {
    // 接收 params 参数
    const { id, title } = this.props.match.params;
    const contentRes = detailData.find((detailObj) => {
      return detailObj.id === id;
    });
    return (
      <ul>
        <li>ID:{id}</li>
        <li>TITLE:{title}</li>
        <li>CITY:{contentRes.city}</li>
      </ul>
    );
  }
}

二. search传参

  1. 路由链接（携带参数）

    <Link to='/home/detail?id=01&title=城市1'>城市</Link>

  2. 注册路由（参数无需声明，正常注册路由即可）

    <Route path="/home/detail" component={Detail} />

  3. 接收传递的参数

    1. 获取到的 search 参数是 urlencode 编码字符串，需要借助 qs(querystring) 解析
    2. qs安装：npm install qs --save

  4. search 传参 案例

    Home 路由组件传递传参

    import React, { Component } from "react";
import { Link, Route } from "react-router-dom";
import Detail from "./Detail";
export default class Home extends Component {
  state = {
    messageArr: [
      { id: "01", title: "城市1" },
      { id: "02", title: "城市2" },
      { id: "03", title: "城市3" },
    ],
  };
  render() {
    const { messageArr } = this.state;
    return (
      <div>
        <ul>
          {messageArr.map((mesObj) => {
            return (
              <li key={mesObj.id}>
                {/* 向路由组件传递 search 参数属性值 */}
                <Link
                  to={`/home/detail?id=${mesObj.id}&title=${mesObj.title}`}
                >
                  {mesObj.title}
                </Link>
              </li>
            );
          })}
        </ul>
        <hr />
        {/* search 参数无需声明，正常注册路由即可 */}
        <Route path="/home/detail" component={Detail} />
      </div>
    );
  }
}

    Detail 路由组件接收参数

    import React, { Component } from "react";
//npm install qs --save
import qs from "qs";

const detailData = [
  { id: "01", city: "江苏" },
  { id: "02", city: "安徽" },
  { id: "03", city: "上海" },
];
export default Detail index extends Component {
  render() {
    // 接收 search  参数
    const { search } = this.props.location;
    const { id, title } = qs.parse(search.slice(1));

    const contentRes = detailData.find((detailObj) => {
      return detailObj.id === id;
    });
    return (
      <ul>
        <li>ID:{id}</li>
        <li>TITLE:{title}</li>
        <li>CITY:{contentRes.city}</li>
      </ul>
    );
  }
}

三. state传参

  1. 路由链接（携带参数）

    <Link
  to={{
    pathname: "/home/detail",
    state: { id: "01", title: "城市1" },
  }}
>
  {mesObj.title}
</Link>

  2. 注册路由（参数无需声明，正常注册路由即可）

    <Route path="/home/detail/" component={Detail}></Route>

  3. 接收传递的参数

    const { id, title } = this.props.location.state || {};

  4. state 传参 案例

    Home 路由组件传递传参

    import React, { Component } from "react";
import { Link, Route } from "react-router-dom";
import Detail from "./Detail";
export default class Home extends Component {
  state = {
    messageArr: [
      { id: "01", title: "城市1" },
      { id: "02", title: "城市2" },
      { id: "03", title: "城市3" },
    ],
  };
  render() {
    const { messageArr } = this.state;
    return (
      <div>
        <ul>
          {messageArr.map((mesObj) => {
            return (
              <li key={mesObj.id}>
                {/* 向路由组件传递 state 参数 */}
                <Link
                  to={{
                    pathname: "/home/detail",
                    state: { id: mesObj.id, title: mesObj.title },
                  }}
                >
                  {mesObj.title}
                </Link>
              </li>
            );
          })}
        </ul>
        <hr />
        {/* state 参数无需声明，正常注册路由即可 */}
        <Route path="/home/detail" component={Detail} />
      </div>
    );
  }
}

    Detail 路由组件接收参数

    import React, { Component } from "react";
const detailData = [
  { id: "01", city: "江苏" },
  { id: "02", city: "安徽" },
  { id: "03", city: "上海" },
];
export default class Detail extends Component {
  render() {
    // 接收 state  参数
    const { id, title } = this.props.location.state || {};
    const contentRes = detailData.find((detailObj) => {
      return detailObj.id === id;
    });
    return (
      <ul>
        <li>ID:{id}</li>
        <li>TITLE:{title}</li>
        <li>CITY:{contentRes.city}</li>
      </ul>
    );
  }
}
【React】路由组件传参（三种方案params、search、state）
Coding and studying
07-12 6073
示例： 示例重点在于：Message组件本身是一个路由组件，其又是Detail组件的父组件，在Message组件中注册Detail子组件，点击导航栏对应链接，将对应的message消息内容传递给子路由组件Detail。然后Detail接收到父路由组件Message传递的params参数，将内容显示在页面对应位置中。接下来展示Message与Detail组件源码： Message组件源码： Detail组件源码： Home组件源码： 路由组件传参——params总结：上面我们学会了向路由组件传递params
react-native路由跳转传参和参数的获取
九段刀客的博客
11-29 400
react
React.js学习（十）、路由传参
黄孝果的博客
02-26 428
一、向路由组件传递params参数 render() { const {messageArr} = this.state return ( <div> <ul> { messageArr.map((msgObj)=>{ return (
react 的 路由传参
weixin_45615650的博客
05-19 8629
1、路由传参 1、动态路由传参 使用prop进行接收 props.match.params.参数名 2、query传参 this.props.history.push({ pathname: ‘路由’, query:{参数名：参数值} }) 接收: this.props.location.query.参数名 3、state传参 this.props.history.push({ pathname: ‘路由’, state:{参数名：参数值} }) 接收: this.props.location.state
React-函数式组件路由传参
零凌林的博客
05-20 762
本文主要针对于React-Router6的函数式组件进行路由传参多种方式进行汇总
react中向路由组件传递参数的三种方式
m0_63135041的博客
04-24 1572
react中向路由组件传递参数的三种方式
React 路由导航与传参详解
最新发布
2301_80052985的博客
01-23 2564
通过，我们可以轻松实现 React 应用中的路由导航、传参以及嵌套路由。<Link>和提供了灵活的导航方式，而和useParams则帮助我们处理路由传参。<Outlet />组件为嵌套路由提供了便捷的占位符功能。此外，通过redirect参数，我们可以在用户登录后将其重定向回原本想要访问的页面，从而提升用户体验。掌握这些工具和技巧，能够帮助我们构建更加复杂和高效的单页面应用。
React学习笔记 -- 组件通信之路由传参（react-router-dom）
2301_82244343的博客
04-13 1203
面试题千万不要死记，一定要自己理解，用自己的方式表达出来，在这里预祝各位成功拿下自己心仪的offer。需要完整面试题的朋友可以点击蓝色字体获取面试题千万不要死记，一定要自己理解，用自己的方式表达出来，在这里预祝各位成功拿下自己心仪的offer。需要完整面试题的朋友可以点击蓝色字体获取[外链图片转存中…(img-Gjq9F1E6-1712952003892)][外链图片转存中…(img-lDmfIYzh-1712952003893)]
【React Router v6】路由组件传参params/search/state(router v6)
Coding and studying
08-14 2814
欢迎来到我的博客【Vue】、【React–从基础到实战】、【TypeScript】等等系列专栏React框架。
React路由组件传递参数
Frank---7的博客
05-10 379
向路由组件传递参数 1.params参数 路由链接(携带参数)：<Link to='/demo/test/tom/18'}>详情</Link> 注册路由(声明接收)：<Route path="/demo/test/:name/:age" component={Test}/> 接收参数：this.props.match.params 2.search参数 路由链接(携带参数)：<Link to='/demo/
react-router 路由传参
逆风飞翔的代码狗
07-13 980
路由传递参数 我们知道前端想后台传递参数有两种方式： 一种是直接将参数放在地址栏里面传递，这里又有两种方式： /home?name=fly&age=18和/home/fly/18 另外一种方式是将参数放在body里面传递 这里针对第一种的两个传递方式： App.js export default class App extends Component { render() { return ( <Router> <Link t
react中路由跳转以及路由传参
kanno的博客
07-23 3067
react中路由跳转以及路由传参
React向路由组件传参的三种方式
weixin_49173037的博客
06-08 714
React 路由组件 传参详解
react-路由组件传递参数的三种方式
zm_miner的博客
06-28 720
整理了一下路由组件传递参数的三种方式 1.params传参 路由链接(携带参数)：<Link to='/demo/test/tom/18'}>详情</Link> 注册路由(声明接收)：<Route path="/demo/test/:name/:age" component={Test}/> 接收参数：this.props.match.params 2.search传参 路由链接(携带参数)：<Link to='/demo/test?name=tom&
react 向路由组件传递参数的三种方式
rh1289583756的博客
09-21 877
react 向路由组件传递参数的三种方式，手把手教你学会路由组件传值
React路由传参的三种方式以及踩坑
m0_49155480的博客
09-27 638
React的三种路由传参的方式 最近一直在写官网，之前主要是写管理后台，所以踩到的一些坑，分享一下 路由的区别：管理后台的路由都是使用HashRouter（/#/）,官网的页面使用BrowserRoute（/）。 使用BrowserRoute会遇到页面直接输入地址，如果不是首页就404或者跳转到没主页后刷新页面出现404。解决方案：nginx配置文件加上 try fiels $uri $uri/ /index.html location /images/ { root /opt/html/; try_fi
React native urlEncoder
baihailing的博客
08-25 1631
url 编码实现方式： _enCoderUrl(str){ let encodeStr = encodeURIComponent(str); //不会对这些进行编码 - _ . ! ~ * ' ( ) encodeStr = encodeStr.replace(/!/g,"%21"); //转换! encodeStr = encodeStr.replac...
react-router-dom 路由传参 几种方式
01-17
### react-router-dom 路由传参的方法 #### 使用 URL 参数传递数据 URL 参数是一种常见的路由间传递静态或动态信息的方式。当路径模式中包含冒号 `:` 开头的部分时，则这部分会被视为参数。 ```javascript import ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值