React 全栈体系（十七）

第九章 React Router 6

一、概述

  • React Router 以三个不同的包发布到 npm 上，它们分别为：

    • react-router: 路由的核心库，提供了很多的：组件、钩子。
    • react-router-dom: 包含 react-router 所有内容，并添加一些专门用于 DOM 的组件，例如 <BrowserRouter>等 。
    • react-router-native: 包括 react-router 所有内容，并添加一些专门用于 ReactNative 的 API，例如:<NativeRouter>等。

  • 与 React Router 5.x 版本相比，改变了什么？

    • 内置组件的变化：移除<Switch/> ，新增 <Routes/>等。

    • 语法的变化：component={About} 变为 element={<About/>}等。

    • 新增多个 hook：useParams、useNavigate、useMatch等。

    • 官方明确推荐函数式组件了！！！

      …

  • 安装：npm install react-router-dom

二、代码实战

1. 一级路由

请添加图片描述

1.1 index.html
<!-- public/index.html -->
<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><title>路由测试</title><link rel="stylesheet" href="/css/bootstrap.css" /><style>.alex {background-color: orange !important;color: white !important;}</style></head><body><div id="root"></div></body>
</html>
1.2 index.js
/* src/index.js */
import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter } from "react-router-dom";
import App from "./App";ReactDOM.render(<BrowserRouter><App /></BrowserRouter>,document.getElementById("root")
);
1.3 App.jsx
/* src/App.jsx */
import React from "react";
import { NavLink, Routes, Route } from "react-router-dom";
import About from "./pages/About";
import Home from "./pages/Home";export default function App() {return (<div><div className="row"><div className="col-xs-offset-2 col-xs-8"><div className="page-header"><h2>React Router Demo</h2></div></div></div><div className="row"><div className="col-xs-2 col-xs-offset-2"><div className="list-group">{/* 路由链接 */}<NavLink className="list-group-item" to="/about">About</NavLink><NavLink className="list-group-item" to="/home">Home</NavLink></div></div><div className="col-xs-6"><div className="panel"><div className="panel-body">{/* 注册路由 */}<Routes><Route path="/about" element={<About />} /><Route path="/home" element={<Home />} /></Routes></div></div></div></div></div>);
}
1.4 About.jsx
/* src/pages/About.jsx */
import React from 'react'export default function About() {return (<h3>我是About的内容</h3>)
}
1.5 Home.jsx
/* src/pages/Home.jsx */
import React from 'react'export default function Home() {return (<h3>我是Home的内容</h3>)
}

2. 重定向

请添加图片描述

2.1 App.jsx
/* src/App.jsx */
import React from "react";
import { NavLink, Routes, Route, Navigate } from "react-router-dom";
import About from "./pages/About";
import Home from "./pages/Home";export default function App() {return (<div><div className="row"><div className="col-xs-offset-2 col-xs-8"><div className="page-header"><h2>React Router Demo</h2></div></div></div><div className="row"><div className="col-xs-2 col-xs-offset-2"><div className="list-group">{/* 路由链接 */}<NavLink className="list-group-item" to="/about">About</NavLink><NavLink className="list-group-item" to="/home">Home</NavLink></div></div><div className="col-xs-6"><div className="panel"><div className="panel-body">{/* 注册路由 */}<Routes><Route path="/ABOUT" element={<About />} /><Route path="/home" element={<Home />} /><Route path="/" element={<Navigate to="/about" />} /></Routes></div></div></div></div></div>);
}
2.2 Home.jsx
/* src/pages/Home.jsx */
import React, { useState } from "react";
import { Navigate } from "react-router-dom";export default function Home() {const [sum, setSum] = useState(1);return (<div><h3>我是Home的内容</h3>{sum === 2 ? (<Navigate to="/about" replace={true} />) : (<h4>当前sum的值是：{sum}</h4>)}<button onClick={() => setSum(2)}>点我将sum变为2</button></div>);
}

3. NavLink 高亮

请添加图片描述

App.jsx
/* src/App.jsx */
import React from "react";
import { NavLink, Routes, Route, Navigate } from "react-router-dom";
import About from "./pages/About";
import Home from "./pages/Home";export default function App() {function computedClassName({ isActive }) {return isActive ? "list-group-item alex" : "list-group-item";}return (<div><div className="row"><div className="col-xs-offset-2 col-xs-8"><div className="page-header"><h2>React Router Demo</h2></div></div></div><div className="row"><div className="col-xs-2 col-xs-offset-2"><div className="list-group">{/* 路由链接 */}<NavLink className={computedClassName} to="/about">About</NavLink><NavLink className={computedClassName} to="/home">Home</NavLink></div></div><div className="col-xs-6"><div className="panel"><div className="panel-body">{/* 注册路由 */}<Routes><Route path="/ABOUT" element={<About />} /><Route path="/home" element={<Home />} /><Route path="/" element={<Navigate to="/about" />} /></Routes></div></div></div></div></div>);
}

4. useRoutes 路由表

4.1 routes
/* src/routes/index.js */
import About from "../pages/About";
import Home from "../pages/Home";
import { Navigate } from "react-router-dom";export default [{path: "/about",element: <About />,},{path: "/home",element: <Home />,},{path: "/",element: <Navigate to="/about" />,},
];
4.2 App.jsx
/* src/App.jsx */
import React from "react";
import { NavLink, useRoutes } from "react-router-dom";
import routes from "./routes";export default function App() {//根据路由表生成对应的路由规则const element = useRoutes(routes);return (<div><div className="row"><div className="col-xs-offset-2 col-xs-8"><div className="page-header"><h2>React Router Demo</h2></div></div></div><div className="row"><div className="col-xs-2 col-xs-offset-2"><div className="list-group">{/* 路由链接 */}<NavLink className="list-group-item" to="/about">About</NavLink><NavLink className="list-group-item" to="/home">Home</NavLink></div></div><div className="col-xs-6"><div className="panel"><div className="panel-body">{/* 注册路由 */}{element}</div></div></div></div></div>);
}

5. 嵌套路由

请添加图片描述

5.1 Home.jsx
/* src/pages/Home.jsx */
import React from "react";
import { NavLink, Outlet } from "react-router-dom";export default function Home() {return (<div><h2>Home组件内容</h2><div><ul className="nav nav-tabs"><li><NavLink className="list-group-item" to="news">News</NavLink></li><li><NavLink className="list-group-item" to="message">Message</NavLink></li></ul>{/* 指定路由组件呈现的位置 */}<Outlet /></div></div>);
}
5.2 Message.jsx
/* src/pages/Message.jsx */
import React from "react";export default function Message() {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>);
}
5.3 News.jsx
/* src/pages/News.jsx */
import React from "react";export default function News() {return (<ul><li>news001</li><li>news002</li><li>news003</li></ul>);
}
5.4 index.js
/* src/routes/index.js */
import About from "../pages/About";
import Home from "../pages/Home";
import Message from "../pages/Message";
import News from "../pages/News";
import { Navigate } from "react-router-dom";export default [{path: "/about",element: <About />,},{path: "/home",element: <Home />,children: [{path: "news",element: <News />,},{path: "message",element: <Message />,},],},{path: "/",element: <Navigate to="/about" />,},
];
5.5 App.jsx
/* src/App.jsx */
import React from "react";
import { NavLink, useRoutes } from "react-router-dom";
import routes from "./routes";export default function App() {//根据路由表生成对应的路由规则const element = useRoutes(routes);return (<div><div className="row"><div className="col-xs-offset-2 col-xs-8"><div className="page-header"><h2>React Router Demo</h2></div></div></div><div className="row"><div className="col-xs-2 col-xs-offset-2"><div className="list-group">{/* 路由链接 */}<NavLink className="list-group-item" to="/about">About</NavLink><NavLink className="list-group-item" to="/home">Home</NavLink></div></div><div className="col-xs-6"><div className="panel"><div className="panel-body">{/* 注册路由 */}{element}</div></div></div></div></div>);
}

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/88789.shtml

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

相关文章

为什么要用线程池？

为什么要用线程池？

线程池是一种管理和复用线程资源的机制&#xff0c;它由一个线程池管理器和一组工作线程组成。线程池管理器负责创建和销毁线程池&#xff0c;以及管理线程池中的工作线程。工作线程则负责执行具体的任务。 线程池的主要作用是管理和复用线程资源&#xff0c;避免了线程的频繁…
阅读更多...
星河AI网络，大模型纪元的运力答案

星河AI网络，大模型纪元的运力答案

随着AI预训练大模型的价值不断显现&#xff0c;且模型规模愈发庞大。产学各界已经形成了这样一个共识&#xff1a;AI时代&#xff0c;算力就是生产力。 这一认知虽然正确&#xff0c;却并不全面。数字化系统有存、算、网三大支柱&#xff0c;AI技术也是如此。如果抛开存储和网络…
阅读更多...
diskGenius专业版使用：windows系统下加载ext4 linux系统分区并备份还原资源（文件的拷贝进、出）

diskGenius专业版使用：windows系统下加载ext4 linux系统分区并备份还原资源（文件的拷贝进、出）

前言 EXT4是第四代扩展文件系统&#xff08;英语&#xff1a;Fourth extended filesystem&#xff0c;缩写为 ext4&#xff09;是Linux系统下的日志文件系统&#xff0c;是ext3文件系统的后继版本。 所以我们在windows系统下是不能识别的&#xff0c;也不能对其写入、拷贝出文…
阅读更多...
Azure AD混合部署，通过 Intune 管理设备，实现条件访问

Azure AD混合部署，通过 Intune 管理设备，实现条件访问

需求&#xff1a; 公司要求&#xff0c;非公司设备不允许使用 邮箱&#xff0c;Teams等O365服务。 我们可以通过 Intune 中的 "条件访问" 解决这个问题。 一、设备同步到 AAD 1、配置 AAD Connect 2、选择 3、下一步 4、配置本地 企业管理员 5、配置成功 二、设备…
阅读更多...
DataExcel控件读取和保存excel xlsx 格式文件

DataExcel控件读取和保存excel xlsx 格式文件

需要引用NPOI库 https://github.com/dotnetcore/NPOI 调用Read 函数将excel读取到dataexcel控件 调用Save 函数将dataexcel控件文件保存为excel文件 using NPOI.HSSF.UserModel; using NPOI.HSSF.Util; using NPOI.SS.UserModel; using NPOI.SS.Util; using System; using …
阅读更多...
torch.sum()——dim参数

torch.sum()——dim参数

dim指在dim的这个维度上&#xff0c;对tesnor 进行求和&#xff0c;如果keepdim&#xff08;保持维度&#xff09;False&#xff0c;返回结果会删去dim所指的这个维度。以下面的例子分析dim的参数~ torch.tensor([[[1, 2, 3], [4, 5, 6]], [[7, 8, 9], [10, 11, 12]]]) print(…
阅读更多...
【C++STL基础入门】list交换、翻转，排序、合并和拼接操作

【C++STL基础入门】list交换、翻转，排序、合并和拼接操作

文章目录 前言一、交换list二、翻转list三、排序list四、合并list五、拼接list总结 前言 在C的标准模板库&#xff08;STL&#xff09;中&#xff0c;list是一个双向链表容器&#xff0c;提供了丰富的功能和操作。本文将介绍list容器在交换、翻转、排序、合并和拼接等方面的基…
阅读更多...
消息中间件

消息中间件

rabbitmq如何保证消息不丢失&#xff1f; 先要看生产者发送消息再哪个环节会丢失&#xff1f; 1 生产者发送消息到交换机失败&#xff08;生产者服务宕机&#xff09; 2 交换机到队列失败 3队列中消息丢失 消息失败后怎么处理呢&#xff1f; 可以设置回调方法重发 记录日…
阅读更多...
【JVM】运行时数据区之方法区——自问自答

【JVM】运行时数据区之方法区——自问自答

开局从康师傅那里借图几张 线程共享与私有 《Java虚拟机规范》中明确说明:“尽管所有的方法区在逻辑上是属于堆的一部分&#xff0c;但一些简单的实现可能不会选择去进行垃圾收集或者进行压缩。” 但对于HotSpotJVM而言&#xff0c;方法区还有一个别名叫做Non-Heap(非堆)&#…
阅读更多...
Vue之ElementUI之动态树+数据表格+分页（项目功能）

Vue之ElementUI之动态树+数据表格+分页（项目功能）

目录 前言 一、实现动态树形菜单 1. 配置相应路径 2. 创建组件 3. 配置组件与路由的关系 index.js 4. 编写动态树形菜单 5. 页面效果演示 二、实现数据表格绑定及分页功能 1. 配置相应路径 2. 编写数据表格显示及分页功能代码 BookList.vue 3. 演示效果 总结 前言…
阅读更多...
vue 普通组件的 局部注册

vue 普通组件的 局部注册

vue 普通组件的 注册 11 Vue2_3入门到实战-配套资料\01-随堂代码素材\day03\素材\00-准备代码\小兔鲜首页静态页\src
阅读更多...
蓝桥杯每日一题20223.9.26

蓝桥杯每日一题20223.9.26

4407. 扫雷 - AcWing题库 题目描述 分析 此题目使用map等都会超时&#xff0c;所以我们可以巧妙的使用哈希模拟散列表&#xff0c;哈希表初始化为-1首先将地雷读入哈希表&#xff0c;找到地雷的坐标在哈希表中对应的下标&#xff0c;如果没有则此地雷的位置第一次出现&#…
阅读更多...
MySQL基础篇-约束

MySQL基础篇-约束

目录 1.约束概述 2.分类 3.测试user表的约束情况 主键约束 非空约束及唯一约束 检查约束 默认约束 4.外键约束 外键约束的语法 外键约束的删除/更新行为 小结 1.约束概述 MySQL约束&#xff08;Constraints&#xff09;是用于确保表中数据完整性和一致性的规则。它们定…
阅读更多...
vue3 + mark.js | 实现文字标注功能

vue3 + mark.js | 实现文字标注功能

页面效果 具体实现 新增 1、监听鼠标抬起事件&#xff0c;通过window.getSelection()方法获取鼠标用户选择的文本范围或光标的当前位置。2、通过 选中的文字长度是否大于0或window.getSelection().isCollapsed (返回一个布尔值用于描述选区的起始点和终止点是否位于一个位置&…
阅读更多...
2.（vue3.x+vite）组件注册并调用

2.（vue3.x+vite）组件注册并调用

前端技术社区总目录（订阅之前请先查看该博客） 关联博客 1.（vue3.x+vite）封装组件 一：umd调用方式 1：引入umd.js <script src="./public/myvue5.umd.js"></script>2：编写代码调用 （1）umd方式，根据“5
阅读更多...
爬虫 — 多线程

爬虫 — 多线程

目录 一、多任务概念二、实现多任务方式1、多进程 &#xff08;Multiprocessing&#xff09;2、多线程&#xff08;Multithreading&#xff09;3、协程&#xff08;Coroutine&#xff09; 三、多线程执行顺序四、多线程的方法1、join()2、setDaemon()3、threading.enumerate() …
阅读更多...
Vue+ElementUI实现动态树和表格数据的分页模糊查询

Vue+ElementUI实现动态树和表格数据的分页模糊查询

目录 前言 一、动态树的实现 1.数据表 2.编写后端controller层 3.定义前端发送请求路径 4.前端左侧动态树的编写 4.1.发送请求获取数据 4.2.遍历左侧菜单 5.实现左侧菜单点击展示右边内容 5.1.定义组件 5.2.定义组件与路由的对应关系 5.3.渲染组件内容 5.4.通过动态…
阅读更多...
Denoising diffusion implicit models 阅读笔记

Denoising diffusion implicit models 阅读笔记

Denoising diffusion probabilistic models (DDPMs)从马尔科夫链中采样生成样本&#xff0c;需要迭代多次&#xff0c;速度较慢。Denoising diffusion implicit models (DDIMs)的提出是为了加速采样过程&#xff0c;减少迭代的次数&#xff0c;并且要求DDIM可以复用DDPM训练的网…
阅读更多...
lv5 嵌入式开发-7 有名管道和无名管道

lv5 嵌入式开发-7 有名管道和无名管道

目录 1 进程间通信介绍 2 无名管道 2.1 无名管道特点 ​编辑 2.2 读无名管道 2.3 写无名管道 3 有名管道 3.1 有名管道特点 3.2 写有名管道 3.3 读有名管道 掌握&#xff1a;进程间通信方式介绍、无名管道特点、无名管道创建、无名管道读写特性&#xff1b;有名管道…
阅读更多...
深入浅出DAX：SELECTEDVALUE()

深入浅出DAX：SELECTEDVALUE()

深入浅出DAX&#xff1a;SELECTEDVALUE() SELECTEDVALUE()&#xff0c;如果筛选 columnName 的上下文后仅剩下一个非重复值&#xff0c;则返回该值。否则返回alternateResult&#xff0c;语法如下&#xff1a; SELECTEDVALUE(<columnName>[, <alternateResult>] …
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023