0604嵌套路由与路由传参-react路由-react

news/2024/11/20 21:17:55/

文章目录

    • 1 嵌套路由
      • 1.1 使用
      • 1.2 总结
    • 2 路由传参
      • 2.1 示例准备
      • 2.1 传递params参数
      • 2.2 传递search参数
      • 2.3 传递state参数
      • 2.4 路由参数总结
    • 结语

1 嵌套路由

1.1 使用

示例效果如下图1.1-1所示：

在这里插入图片描述

该示例代码其他部分和上一篇相同，这里主要讲解下嵌套路由的使用。

分析：home组件中嵌套了News和Message两个路由组件。

  • 创建News组件

    • 在原项目结构Home文件夹下创建News/index.jsx

    • 源代码1.1-1如下所示

      import React, { Component } from 'react'export default class News extends Component {render() {return (<ul><li>news001</li><li>news002</li><li>news003</li></ul>)}
}

  • 创建Message组件

    • Home文件夹下创建Message/index.jsx

    • 源代码1.1-2如下图所示

      import React, { Component } from 'react'export default class Message extends Component {render() {return (<div><ul><li><a href="/message1">message001</a>&nbsp;&nbsp;</li><li><a href="/message2">message002</a>&nbsp;&nbsp;</li><li><a href="/message/3">message003</a>&nbsp;&nbsp;</li></ul></div>)}
}

  • Home/jsx添加导航链接和注册路由

    • 源代码1.1-3如下所示：

      import React, { Component } from 'react'
import { Route, Switch, Redirect } from 'react-router-dom';
import MyNavLink from '../../components/MyNavLink'
import Message from './Message';
import News from './News'export default class Home extends Component {render() {return (<div><h3>我是Home的内容</h3><div><ul className="nav nav-tabs"><li><MyNavLink to="/home/news">News</MyNavLink></li><li><MyNavLink to="/home/message">Message</MyNavLink></li></ul></div>{/* 注册路由 */}<Switch><Route path="/home/news" component={News} /><Route path="/home/message" component={Message} /><Redirect to="/home/news" /></Switch></div>)}
}

启动项目，完成嵌套路由的使用。

  • 分析路由匹配原理
    • 首先react完成App.jsx中路由注册
    • 当点击News时，对应路径"/home/news"开始按照路由注册顺序开始匹配。
      • 优先模糊匹配"/home",展示Home组件。
      • 继续匹配Home组件中路径"/home/news"，展示News组件。

1.2 总结

  • 注册路由时要写上父路由的path值；
  • 路由匹配是按照注册路由的顺序进行的。

2 路由传参

2.1 示例准备

示例效果，点击消息，展示对应的消息内容，如下图2.1-1所示：

在这里插入图片描述

示例其他代码同上，这里只写对应的消息部分。

  • 简单分析

    • 当前为二级路由下导航链接，点击链接，展示消息详情，即为三级路由。
    • 消息详情结构一致，封装为路由组件Detail。
    • Message组件下消息结构一样，内容不同，在state中写数据，遍历动态生成。

  • Detail组件代码2.1-1如下所示：

    import React, { Component } from 'react'export default class Detail extends Component {render() {return (<ul><li>ID:xxx</li><li>TITLE:xxx</li><li>CONTENT:xxx</li></ul>)}
}

  • Messge组件代码2.1-2如下所示：

    import React, { Component } from 'react'
import { Link, Route } from 'react-router-dom'
import Detail from './Detail'export default class Message extends Component {state = {messArr : [{ id: '01', title: '消息1' },{ id: '02', title: '消息2' },{ id: '03', title: '消息3' },]}render() {const { messArr } = this.statereturn (<div><ul>{messArr.map((msg) => {return (<li key={msg.id}><Link to="/home/message/detail">{msg.title}</Link>&nbsp;&nbsp;</li>)})}</ul><hr /><Route path="/home/message/detail" component={Detail}></Route></div>)}
}

如果想要实现点击不同消息链接，展示不同的消息内容，需要通过路由传递参数。下面我们详细讲解三种路由传参方式，并做总结和比较。

2.1 传递params参数

  • 第一步：路由链接向路由组件传递params参数

    {/* 格式：/}
<Link to="/path1/path2/.../pathn/参数1/参数2/.../参数n"></Link>
{/* 示例：/}
{/* 向路由组件传递params参数 */}
<Link to={`/home/message/detail/${msg.id}/${msg.title}`}>{msg.title}</Link>&nbsp;&nbsp;

  • 第二步：路由组件声明接收params参数

    {/* 格式 */}
<Route path="/path1/path2/.../pathn/:参数1/:参数2/.../:参数n" component={组件}></Route>
{/* 示例 */}
{/* 声明接收params参数 */}
<Route path="/home/message/detail/:id/:title" component={Detail}></Route>

  • 第三步：组件获取参数

    // 组件内 this.props.match.params 即为react封装好的params对象
const {id, titel} = this.props.match.params

Detail组件index.jsx组件获取和展示参数如下所示源代码2.1-1如下所示：

import React, { Component } from 'react'
const data = [{id: 1, content: '学习 Java'},{id: 2, content: '学习 Python'},{id: 3, content: '学习 React'},
]export default class Detail extends Component {render() {// console.log(this.props);let {id, title} = this.props.match.paramsid = id - 0const detail = data.find((detail) => {return detail.id === id})  return (<ul><li>ID: {id}</li><li>TITLE: {title}</li><li>CONTENT: {detail.content}</li></ul>)}
}

2.2 传递search参数

  • 第一步：路由链接向路由组件传递search参数

    {/* 格式：/}
<Link to="/path1/path2/.../pathn/?参数1=值1&参数2=值2&...&参数n=值n"></Link>
{/* 示例：/}
{/* 向路由组件传递params参数 */}
<Link to={`/home/message/detail/?id=${msg.id}&title=${msg.title}`}>{msg.title}</Link>&nbsp;&nbsp;

  • 第二步：接受search参数无需声明

    {/*  */}
<Route path="/path1/path2/.../pathn" component={组件}></Route>
{/* 示例 */}
{/* 声明接收params参数 */}
<Route path="/home/message/detail" component={Detail}></Route>

  • 第三步：组件获取参数

    // 组件内 this.props.location.search 为接受的search字符串，形式：?参数1=值1&参数2=值2&...
// 需要自己处理或者第三方库
const {search} = this.props.location

Detail组件index.jsx组件获取和展示参数如下所示，其他同上源代码2.1-2如下所示：

let {id, title} = qs.parse(this.props.location.search, {ignoreQueryPrefix: true})

2.3 传递state参数

注：此state为组件state参数不是组件的state属性。

  • 第一步：路由链接向路由组件传递state参数

    {/* 格式：/}
<Link to={{pathname: "/path1/path2/.../pathn, state: {参数1： 值1, 参数2: 值2, ...}}}></Link>
{/* 示例：/}
{/* 向路由组件传递state参数 */}
<Link to={{pathname: '/home/message/detail', state: msg}}>{msg.title}</Link>

  • 第二步：接受search参数无需声明

    {/* 格式 */}
<Route path="/path1/path2/.../pathn" component={组件}></Route>
{/* 示例 */}
{/* 无需声明接收state参数 */}
<Route path="/home/message/detail" component={Detail}></Route>

  • 第三步：组件获取参数

    // 组件内 this.props.location.state 即为接受的state参数对象
const {id, title} = this.props.location.state

Detail组件index.jsx组件获取和展示参数如下所示，其他同上源代码2.1-2如下所示：

// 接收state参数
let {id, title} = this.props.location.state

2.4 路由参数总结

  • 使用形式
  1. params参数传递
    • 路由链接传递参数：<Link to="/demo/test/4/aaa">测试</Link>
    • 路由组件声明加收参数：<Route path="/demo/test/:id/:title" component={Test} />
    • 组件接受参数：let {id, title} = this.props.match.params
  2. search参数传递
    • 路由链接传递参数：<Link to="/demo/test/?id=1&title=xxx">测试</Link>
    • 注册路由组件（无需声明）：<Route path="/demo/test" component={Test} />
    • 组件接受参数：let {search} = this.props.locaiton,然后解析
  3. state参数
    • 路由链接传递参数：<Link to={{pathname: '/demo/test', state: {id: 1, title: 'xxx'}}}>测试</Link>
    • 注册路由组件（无需声明）：<Route path="/demo/test" component={Test} />
    • 组件接受参数：let {id, title} = this.props.location.state
    • 注：刷新也可以保住参数*，因为路由器是BrowserRouter，react维护history；但是如果清空缓存，参数丢失。
  • 比较
    • params传参：路径携带参数；
    • search传参：路径携带参数，接受参数后需要另外解析；
    • state传参：适用于参数具有一定保密性需求，不希望对外暴露场景

结语

❓QQ:806797785

⭐️源代码仓库地址：https://github.com/gaogzhen/react-staging.git

参考：

[1]React视频教程[CP/OL].2020-12-15.p85-89.

[2]React官网[CP/OL].


http://www.ppmy.cn/news/103487.html

相关文章

Apache的配置、应用和优化(遥不可及)

Apache的配置、应用和优化(遥不可及)

文章目录 一、构建虚拟web主机二、配置虚拟主机1.基于域名&#xff08;1&#xff09;为虚拟主机提供域名解析&#xff08;2&#xff09;为虚拟主机准备网页文档&#xff08;3&#xff09;添加虚拟主机配置&#xff08;5&#xff09;启用上一步的子配置文件&#xff08;6&#x…
阅读更多...
[Nacos] Nacos Server与Nacos Client间的UDP通信 (十)

[Nacos] Nacos Server与Nacos Client间的UDP通信 (十)

文章目录 1.Nacos Server与Nacos Client间的UDP通信1.1 Nacos Server向Nacos Client进行UDP推送1.2 Nacos Client接收Nacos Server的UDP推送 1.Nacos Server与Nacos Client间的UDP通信 Nacos Server向Nacos Client进行UDP推送Nacos Client接收Nacos Server的UDP推送 1.1 Naco…
阅读更多...
热榜！阿里出品2023版Java架构师面试指南，涵盖Java所有核心技能

热榜！阿里出品2023版Java架构师面试指南，涵盖Java所有核心技能

最近很多粉丝朋友私信我说&#xff1a;熬过了去年的寒冬却没熬过现在的内卷&#xff1b;打开Boss直拒一排已读不回&#xff0c;回的基本都是外包&#xff0c;薪资还给的不高&#xff0c;对技术水平要求也远超从前&#xff1b;感觉Java一个初中级岗位有上千人同时竞争&#xff0…
阅读更多...
Microsoft Build 发布，开发者可能关注的重点→

Microsoft Build 发布，开发者可能关注的重点→

又是一年一度的 Microsoft Build 了&#xff0c;你有和我一样熬夜看了吗&#xff1f;如果没有&#xff0c;那么你就错过了一场精彩的技术盛宴。本次的 Microsoft Build&#xff0c;有非常多的干货&#xff0c;围绕打造 Copilot 应用展开。我会将基于 Data AI 比较重要的内容列…
阅读更多...
Loki安装使用方式

Loki安装使用方式

Distributor 收到 HTTP 请求&#xff0c;用于存储流数据 通过 hash 环对数据流进行 hash Distributor将数据流发送到对应的Ingester及其副本上 Ingester 新建 Chunk 或将数据追加到已有Chunk 上 Distributor通过 HTTP连接发送响应信息 Loki 日志系统由以下3个部分组成&#xf…
阅读更多...
OFGF光流引导特征：用于视频动作识别的快速且稳健的运动表示【含源码】

OFGF光流引导特征：用于视频动作识别的快速且稳健的运动表示【含源码】

论文地址：https://openaccess.thecvf.com/content_cvpr_2018/papers/Sun_Optical_Flow_Guided_CVPR_2018_paper.pdf 这个 repo 包含论文的实现代码： Optical Flow Guided Feature: A Fast and Robust Motion Representation for Video Action Recognition，Shuyang Sun，Zh…
阅读更多...
Java泛型 ＜T＞ T、 T、＜T＞的用法

Java泛型 ＜T＞ T、 T、＜T＞的用法

我们聊聊Java泛型中的 T 是什么&#xff1f; T 在Java泛型中&#xff0c;被称作类型变量。那么什么又是类型变量&#xff1f; 类型变量在整个类的定义中用于指定方法的返回类型&#xff0c;同时也可以指定字段和局部变量的类型&#xff0c;我们可以用具体的类型来替换类型变量…
阅读更多...
VimGvim基本操作

VimGvim基本操作

Vim教程(超强记事本) shift按住选中终端文本然后再执行复制命令可复制文本 CRTLL清空但保存 reset 清空不保存 一定英文输入法&#xff0c;不然键位可能冲突 功能&#xff1a; (1) 命令行模式下的文本编辑器。 (2) 根据文件扩展名自动判别编程语言。支持代码缩进、代码高亮…
阅读更多...
最新文章

Copyright @ 2022~2023