• React - 路由组件传参

    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>

      • 1

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

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

      • 1

    3. 接收传递的参数

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

      • 1

    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>
    );
  }
}

      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8
      • 9
      • 10
      • 11
      • 12
      • 13
      • 14
      • 15
      • 16
      • 17
      • 18
      • 19
      • 20
      • 21
      • 22
      • 23
      • 24
      • 25
      • 26
      • 27
      • 28
      • 29
      • 30
      • 31
      • 32
      • 33
      • 34

      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>
    );
  }
}

      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8
      • 9
      • 10
      • 11
      • 12
      • 13
      • 14
      • 15
      • 16
      • 17
      • 18
      • 19
      • 20
      • 21
      • 22
      • 23

    二. search传参

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

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

      • 1

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

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

      • 1

    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>
    );
  }
}


      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8
      • 9
      • 10
      • 11
      • 12
      • 13
      • 14
      • 15
      • 16
      • 17
      • 18
      • 19
      • 20
      • 21
      • 22
      • 23
      • 24
      • 25
      • 26
      • 27
      • 28
      • 29
      • 30
      • 31
      • 32
      • 33
      • 34
      • 35
      • 36
      • 37

      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>
    );
  }
}

      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8
      • 9
      • 10
      • 11
      • 12
      • 13
      • 14
      • 15
      • 16
      • 17
      • 18
      • 19
      • 20
      • 21
      • 22
      • 23
      • 24
      • 25
      • 26
      • 27

    三. state传参

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

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

      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8

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

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

      • 1

    3. 接收传递的参数

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

      • 1

    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>
    );
  }
}

      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8
      • 9
      • 10
      • 11
      • 12
      • 13
      • 14
      • 15
      • 16
      • 17
      • 18
      • 19
      • 20
      • 21
      • 22
      • 23
      • 24
      • 25
      • 26
      • 27
      • 28
      • 29
      • 30
      • 31
      • 32
      • 33
      • 34
      • 35
      • 36
      • 37
      • 38
      • 39

      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>
    );
  }
}

      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8
      • 9
      • 10
      • 11
      • 12
      • 13
      • 14
      • 15
      • 16
      • 17
      • 18
      • 19
      • 20
      • 21
      • 22
  • 相关阅读:
    静电模型PIC方法的Matlab仿真设计
    头歌平台 | 逻辑函数及其描述工具logisim使用
    [MySQL]基本介绍及安装使用详细讲解
    测试基础09：缺陷（bug）生命周期、定位方式和管理规范
    mybatisplus 用@select注解,对查询结果使用handler处理结果
    智能运维监控告警6大优势
    SaaSBase：什么是艾客SCRM？
    arthas热更新线上代码实操记录
    apollo中配置map，list
    Azure Synapse Analytics 性能优化指南（2）——使用具体化视图优化性能(上)
  • 原文地址：https://blog.csdn.net/Jie_1997/article/details/126665824