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

news2024/11/18 18:46:20

文章目录

    • 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.state
    return (
      <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.params
    id = id - 0
    const 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.coloradmin.cn/o/585482.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

CVPR2023 I NeRF-Supervised Deep Stereo：不需要任何ground-truth数据

CVPR2023 I NeRF-Supervised Deep Stereo：不需要任何ground-truth数据

论文题目：NeRF-Supervised Deep Stereo 作者：Fabio Tosi ；Alessio Tonioni; Daniele De Gregorio等人 作者机构：University of Bologna(博洛尼亚大学)；Google Inc(全球最大的搜索引擎之一)；Eyecan.ai(韩国专注于开发眼动追踪技术的公司) 在公众号「3D视觉工坊」后台回复「…
阅读更多...
老电脑重生：深度剖析各部件的羁绊关系

老电脑重生：深度剖析各部件的羁绊关系

目录 引言&#xff1a; 正文&#xff1a; 主板&#xff1a; CPU 参数&#xff1a; 分类 接口 intel CPU升级推荐 AMD CPU升级推荐 CPU散热器&#xff1a; 内存条 硬盘 独立显卡 电源 机箱 总结 引言&#xff1a; 在科技日新月异的时代&#xff0c;我们与…
阅读更多...
【从零到Offer】- HashMap与HashSet

【从零到Offer】- HashMap与HashSet

​ HashMap与HashSet是我们日常最常使用的两个集合类。在实现上&#xff0c;两者也有很大的相似性。HashSet基本就是对HashMap的一个简单包装。 ​ 为了更好的理解Hash结构的实现原理&#xff0c;从而更好的指导我们的代码使用&#xff0c;本文就主要对HashMap的实现及设计做分…
阅读更多...
Java并发体系-第二阶段-锁与同步-[3]（仅做了解吧不好理解）

Java并发体系-第二阶段-锁与同步-[3]（仅做了解吧不好理解）

synchronized保证三大特性 synchronized保证原子性的原理 对num;增加同步代码块后&#xff0c;保证同一时间只有一个线程操作num;。就不会出现安全问题。 synchronized保证可见性的原理 synchronized保证可见性的原理&#xff0c;执行synchronized时&#xff0c;会对应lock…
阅读更多...
下载STM32固件库

下载STM32固件库

不想找的可直接输入下面的网址 https://www.st.com/en/embedded-software/stm32-standard-peripheral-libraries.html 官网下载的慢&#xff0c;阿里云链接 STM32固件 https://www.aliyundrive.com/s/e2Q3j19Bnkv 点击链接保存&#xff0c;或者复制本段内容&#xff0c;打开…
阅读更多...
【UE】不规则物体外轮廓发光

【UE】不规则物体外轮廓发光

效果 按下2键显示鼠标&#xff0c;将鼠标移动到指定的物体身上然后按下ctrl键就会使得指定物体高亮显示。 步骤 1. 创建一个材质并打开 材质域设置为后期处理 可混合位置改为“色调映射前” 添加如下节点&#xff1a; 2. 打开玩家控制的蓝图&#xff0c;添加如下节点 3. 场景…
阅读更多...
新手装sql

新手装sql

windows sever 安装完了得装个sql&#xff0c;我也不会&#xff0c;按网上找到的资料&#xff0c;一步一步试吧 到这个地址去下载SQL Server https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 谁能救救我&#xff0c;全是英文&#xff0c;都看不懂&#xff0…
阅读更多...
sentinel持久化

sentinel持久化

sentinel规则推送模式 原始模式 在sentinel源码中是不支持规则持久化的&#xff0c;一旦sentinel服务宕机&#xff0c;匹配的所有规则将彻底消失。在上篇博客中展示了sentinel的源码流程图&#xff0c;在sentinel dashboard新增一条流控规则&#xff08;或者其他规则&#xf…
阅读更多...
Boost开发指南-1.3date_time

Boost开发指南-1.3date_time

date_time date_time库勇敢地面对了这个挑战&#xff0c;并成功地解决了大部分问题。它是一个非常全面且灵活的日期时间库&#xff0c;基于我们日常使用的公历&#xff08;即格里高利历)&#xff0c;可以提供时间相关的各种所需功能&#xff0c;如精确定义的时间点、时间段和时…
阅读更多...
CSS入门学习笔记+案例【一】

CSS入门学习笔记+案例【一】

目录 一、CSS 是什么 二、引入方式 2.2 行内样式表 2.3 外部样式 三、 代码风格 3.1 样式格式 3.2 样式大小写 3.3 空格规范 四、 选择器 4.1 选择器的功能 4.2 选择器的种类 复合选择器小结 看完这篇博客 你将 掌握 CSS 基本语法规范和代码书写风格 掌握 CSS 选择…
阅读更多...
ARM微架构

ARM微架构

目录 1.流水线 2.指令流水线 3. 多核处理器​编辑 4. 工程搭建 4.1为Keil软件配置编译工具链 5.程序编写 5.1 数据处理指令 5.2 带标志位的加法ADC ADDS 5.3 跳转指令B\BL 5.4 单寄存器内存访问 5.5 批量寄存器内存访问 5.6 满减操作 1.流水线 2.指令流水线 3.…
阅读更多...
Ansible从入门到精通【三】

Ansible从入门到精通【三】

大家好&#xff0c;我是早九晚十二&#xff0c;目前是做运维相关的工作。写博客是为了积累&#xff0c;希望大家一起进步&#xff01; 我的主页&#xff1a;早九晚十二 专栏名称&#xff1a;Ansible从入门到精通 立志成为ansible大佬 ♣ansible的高级指令 ansible-playbook写一…
阅读更多...
Java 集合中 ArrayList 的扩容机制原理（面试+读源码）

Java 集合中 ArrayList 的扩容机制原理（面试+读源码）

在 Java 中&#xff0c;ArrayList 内部是通过一个数组来存储元素的&#xff0c;是一个数组结构的存储容器。当向一个 ArrayList 中添加元素时&#xff0c;如果当前数组已经满了&#xff0c;就需要扩容。 集合的继承关系图 一、面试回答 ( ArrayList 的扩容机制原理 ) 面试…
阅读更多...
Vue 脚手架（打包工具）的理解 - 配置文件理解

Vue 脚手架（打包工具）的理解 - 配置文件理解

序言 Vue 脚手架是 Vue 作为一个前端开发项目的最核心点&#xff0c;将JavaScript、CSS、HTML这几种前端自动整合&#xff0c;极大的简化了前端开发工作。 没有 Vue 脚手架&#xff0c;就没有 Vue &#xff0c;这是一定的&#xff0c;Java 语言和C语言都需要编译&#xff0c;…
阅读更多...
【论文阅读】Analyzing group-level emotion with global alignment kernel based approach

【论文阅读】Analyzing group-level emotion with global alignment kernel based approach

【论文阅读】Analyzing group-level emotion with global alignment kernel based approach 摘要1.介绍与相关工作2.方法3.实验 摘要 本篇博客参考IEEE于2022年收录的论文Analyzing group-level emotion with global alignment kernel based approach&#xff0c;对其主要内容…
阅读更多...
new一个ObjectInputStream为什么会出现java.io.EOFException

new一个ObjectInputStream为什么会出现java.io.EOFException

一、举例代码 package com.softeem.wolf.homework06;import java.io.*;/*** Created by 苍狼* Time on 2023-05-24*/ public class App {public static void main(String[] args) throws IOException {ObjectInputStream ois null;ObjectOutputStream oos null;ois new Obj…
阅读更多...
功率信号源的特点和用途是什么

功率信号源的特点和用途是什么

功率信号源是一种电子测量仪器&#xff0c;它集信号发生器与功率放大器为一体&#xff0c;具有高电压、大功率的特点。在电子实验室中&#xff0c;功率信号源可以帮助用户驱动压电陶瓷、换能器以及电磁线圈等&#xff0c;有效地解决了驱动负载和放大功率的问题。下面我们来具体…
阅读更多...
Linux：LAMP的架构与环境配置

Linux：LAMP的架构与环境配置

这里写目录标题 一、LAMP1.1 LAMP是什么1.2 安装顺序 二、编译安装Apache httpd服务2.1 关闭防火墙&#xff0c;将安装Apache所需软件包传到/opt目录下2.2 安装环境依赖包2.3 配置软件模块2.4 编译及安装2.5 优化配置文件路径2.6 添加httpd系统服务2.7 修改httpd 服务配置文件2…
阅读更多...
MySql基础学习（2）

MySql基础学习（2）

MySql基础学习 一、函数1.1 字符串函数1.2 数值函数1.3 日期函数1.4 流程控制语句 二、约束2.1 约束基本分类2.2 外键约束2.3 删除/更新行为 三、多表查询3.1 多表关系3.2 多表查询概述3.3 多表查询分类3.3.1 内连接3.3.2 外连接3.3.3 连接查询-自连接 3.4 联合查询-union&…
阅读更多...
[SpringBoot]xml写mapper

[SpringBoot]xml写mapper

创建工程[SpringBoot框架]如何使用SpringBoot框架_万物更新_的博客-CSDN博客 实现步骤: 测试: <?xml version"1.0" encoding"UTF-8" ?> <!DOCTYPE mapperPUBLIC "-//mybatis.org//DTD Mapper 3.0//EN""http://mybatis.org/dtd…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023