React-Router6路由相关一（路由的基本使用、重定向、NavLink·、路由表、嵌套路由）（七）

news2024/11/18 9:30:44

系列文章目录

第一章：React基础知识（React基本使用、JSX语法、React模块化与组件化）（一）
第二章：React基础知识（组件实例三大核心属性state、props、refs）（二）
第三章：React基础知识（事件处理、受控组件与非受控组件、高阶函数、组件的生命周期）（三）
第四章：React脚手架应用（创建脚手架、代理配置、ajax相关、组件通信）（四）
第五章：react-router5路由相关一（路由相关概念、基本使用、NavLink与NavLink的封装、Switch的使用、严格匹配、路由重定向、路由组件与一般组件的区别）（五）
第六章：react-router5路由相关二（嵌套路由、路由传参、replace、编程式路由导航、withRouter的使用、BrowserRouter与HashRouter的区别）（六）

文章目录

  • 系列文章目录
    • 一、路由的基本使用
      • 1.1 `<BrowserRouter>`
      • 1.2 `<HashRouter>`
      • 1.3 ` `与 ` `
    • 二、`<Navigate>`重定向
    • 三、Link和NavLink
      • 3.1 `<Link>`
      • 3.2 `<NavLink>`
    • 四、路由表useRoutes()
    • 五、嵌套路由`<Outlet>`

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

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

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

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

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

    …

一、路由的基本使用

1.1 <BrowserRouter>

  1. 说明：<BrowserRouter> 用于包裹整个应用。

  2. 示例代码：

    import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter } from "react-router-dom";

ReactDOM.render(
  <BrowserRouter>
    {/* 整体结构（通常为App组件） */}
  </BrowserRouter>,root
);

1.2 <HashRouter>

  1. 说明： 作用与<BrowserRouter>一样，但<HashRouter>修改的是地址栏的hash值。
  2. 备注： 6.x版本中<HashRouter>、<BrowserRouter> 的用法与 5.x 相同。

1.3 <Routes/> 与 <Route/>

  1. v6版本中移出了先前的<Switch>，引入了新的替代者：<Routes>。

  2. <Routes> 和 <Route>要配合使用，且必须要用<Routes>包裹<Route>。

  3. <Route> 相当于一个 if 语句，如果其路径与当前 URL 匹配，则呈现其对应的组件。

  4. <Route caseSensitive> 属性用于指定：匹配时是否区分大小写（默认为 false）。

  5. 当URL发生变化时，<Routes> 都会查看其所有子 <Route> 元素以找到最佳匹配并呈现组件 。

  6. <Route> 也可以嵌套使用，且可配合useRoutes()配置 “路由表” ，但需要通过 <Outlet> 组件来渲染其子路由。

  7. 示例代码：

    <Routes>
    /*path属性用于定义路径，element属性用于定义当前路径所对应的组件*/
    <Route path="/login" element={<Login />}></Route>

		/*用于定义嵌套路由，home是一级路由，对应的路径/home*/
    <Route path="home" element={<Home />}>
       /*test1 和 test2 是二级路由,对应的路径是/home/test1 或 /home/test2*/
      <Route path="test1" element={<Test/>}></Route>
      <Route path="test2" element={<Test2/>}></Route>
		</Route>
	
		//Route也可以不写element属性, 这时就是用于展示嵌套的路由 .所对应的路径是/users/xxx
    <Route path="users">
       <Route path="xxx" element={<Demo />} />
    </Route>
</Routes>

代码片段：

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')
)

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

About.jsx

import React from 'react'

export default function About() {
	return (
		<h3>我是About的内容</h3>
	)
}

Home.jsx

import React from 'react'

export default function Home() {
	return (
		<h3>我是Home的内容</h3>
	)
}

运行结果：
在这里插入图片描述

二、<Navigate>重定向

  1. 作用：只要<Navigate>组件被渲染，就会修改路径，切换视图。

  2. replace属性用于控制跳转模式（push 或 replace，默认是push）。

  3. 示例代码： <Navigate to="/about" replace={true}/>

代码片段（为节省空间，该案例App、About、index的代码和上述第一个案例一致，不在重复描述）：
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>
	)

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

运行结果：
在这里插入图片描述

三、Link和NavLink

3.1 <Link>

  1. 作用: 修改URL，且不发送网络请求（路由链接）。

  2. 注意: 外侧需要用<BrowserRouter>或<HashRouter>包裹。

  3. 示例代码：

    import { Link } from "react-router-dom";

function Test() {
  return (
    <div>
    	<Link to="/路径">按钮</Link>
    </div>
  );
}

3.2 <NavLink>

  1. 作用: 与<Link>组件类似，且可实现导航的“高亮”效果。

  2. 示例代码：

    // 注意: NavLink默认类名是active，下面是指定自定义的class

//自定义样式
<NavLink
    to="login"
    className={({ isActive }) => {
        console.log('home', isActive)
        return isActive ? 'base one' : 'base'
    }}
>login</NavLink>

/*
	默认情况下，当Home的子组件匹配成功，Home的导航也会高亮，
	当NavLink上添加了end属性后，若Home的子组件匹配成功，则Home的导航没有高亮效果。
*/
<NavLink to="home" end >home</NavLink>

案例片段：（为节省空间，该案例Home、About、index的代码和上述第一个案例一致，不在重复描述）：

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 atguigu' : '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>
	)
}

运行结果：
在这里插入图片描述

四、路由表useRoutes()

  1. 作用： 根据路由表，动态创建<Routes>和<Route>。

案例片段：（为节省空间，该案例Home、About、index的代码和上述第一个案例一致，不在重复描述）：

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

routes.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"/>
	}
]

运行结果：
在这里插入图片描述

五、嵌套路由<Outlet>

当<Route>产生嵌套时，渲染其对应的后续子路由。

案例片段：（为节省空间，该案例App、About、index的代码和上述路由表案例一致，不在重复描述）：
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>
	)
}

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

News.jsx

import React from 'react'

export default function News() {
	return (
		<ul>
			<li>news001</li>
			<li>news002</li>
			<li>news003</li>
		</ul>
	)
}

routes.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"/>
	}
]

运行结果：

在这里插入图片描述

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

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

相关文章

Android OpenGL ES 学习(十二) - MediaCodec + OpenGL 解析H264视频+滤镜

Android OpenGL ES 学习(十二) - MediaCodec + OpenGL 解析H264视频+滤镜

OpenGL 学习教程 Android OpenGL ES 学习(一) – 基本概念 Android OpenGL ES 学习(二) – 图形渲染管线和GLSL Android OpenGL ES 学习(三) – 绘制平面图形 Android OpenGL ES 学习(四) – 正交投影 Android OpenGL ES 学习(五) – 渐变色 Android OpenGL ES 学习(六) – 使用…
阅读更多...
宝妈可以做什么副业比较好？盘点七种适合宝妈的在家工作

宝妈可以做什么副业比较好？盘点七种适合宝妈的在家工作

现在有很多全职宝妈在家带孩子的&#xff0c;除了带孩子以外呢&#xff0c;还有很多的空闲时间&#xff0c;所以找一份自由的兼职工作是如今很多宝妈的想法。不仅可以给家里增加收入&#xff0c;支付日常开支&#xff0c;减轻老公的压力&#xff0c;还可以让自己学点新的赚钱知…
阅读更多...
Linux编辑器-vim

Linux编辑器-vim

一、vim的基本概念 我们讲解vim的三种模式(其实有好多模式&#xff0c;目前掌握这3种即可),分别是命令模式&#xff08;command mode&#xff09;、插入模式&#xff08;Insert mode&#xff09;和底行模式&#xff08;last line mode&#xff09;&#xff0c;各模式的功能区分…
阅读更多...
OpenCV4入门到进阶

OpenCV4入门到进阶

OpenCV4入门到进阶 第1章 介绍与学习指南 第2章 OpenCV开发环境搭建 第3章 图像&视频的加载与展示 第4章 OpenCV必知必会基础 第5章 OpenCV实现图形的绘制 第6章 OpenCV的算术与位运算 第7章 图像基本变换 第8章 OpenCV中的滤波器 第9章 OpenCV中的形态学 第10章 目标识别…
阅读更多...
Redis事务以及缓存雪崩,缓存穿透,缓存击穿简介及解决策略

Redis事务以及缓存雪崩,缓存穿透,缓存击穿简介及解决策略

事物的基本操作 *开启事务 multi *作用 设定事物的开启位置,此指令执行后,后续的所有指令均加入到事物中 *执行事物 exec *作用 设定事物的结束位置,同时执行事物,与multi成对出现,成对使用 注意:加入事物的命令暂时进入到任务队列中,并没有立即执行,只有执行exec命令才开始执行…
阅读更多...
商业与新消费：从2022到2023

商业与新消费：从2022到2023

【潮汐商业评论/原创】 “暴风雨结束后&#xff0c;你不会记得自己是怎样活下来的&#xff0c;你甚至不确定暴风雨真的结束了。但有一件事是确定的&#xff1a;当你穿过暴风雨&#xff0c;你就不再是原来那个人。”——村上春树转眼间&#xff0c;时间的齿轮已经从2022滑向了20…
阅读更多...
开发中常用、实用命令记录总结

开发中常用、实用命令记录总结

开发中常用、实用命令记录总结前言Linux修改Linux主机名称设置Linux虚拟内存Linux的网络和IO测试Linux查看内存、CPU占用最多的程序防火墙Firewall命令系统管理systemctl命令Centos的yum源设置Windos进程、端口、网络连接快速调出Cmdtext文本文件妙用任务计划Docker青龙面板忘记…
阅读更多...
tomcat组件-Server

tomcat组件-Server

目录 概述 tomcat 启动 大致流程 Server StandardServer 利用8005端口关闭tomcat 总结 概述 了解一个程序&#xff0c;一定要知道他是干什么的&#xff0c;以及内部架构如何支撑这么干的&#xff0c;以及牵扯的到的概念、模式等知识点的解析(这里只介绍组件)。 Tomcat是…
阅读更多...
软件测试 | 简历中应该如何描述才能体现出软技能的实力 ？

软件测试 | 简历中应该如何描述才能体现出软技能的实力 ？

很多同学写简历的时候&#xff0c;真的是非常纠结的。技术能力怎么写&#xff1f;工作经历怎么写&#xff1f;项目经验怎么写&#xff1f;其中以拥有多个项目经验的同学和没有项目经验的学生最为纠结。前者是项目经验太多了&#xff0c;工作多年&#xff0c;每个项目经验要是都…
阅读更多...
2023年全国最新消防设施操作员模拟试题题库及答案

2023年全国最新消防设施操作员模拟试题题库及答案

百分百题库提供消防设施操作员考试试题、消防设施操作员考试预测题、消防设施操作员考试真题、消防设施操作员证考试题库等,提供在线做题刷题&#xff0c;在线模拟考试&#xff0c;助你考试轻松过关。 15.&#xff08;&#xff09;是平时不能满足水灭火设施所需的工作压力和流量…
阅读更多...
以太网交换基础

以太网交换基础

以太网协议 以太网是当今现有局域网&#xff08;Local Area Network&#xff0c;LAN&#xff09;采用的最通用的通信协议标准。 以太网是建立在CSDA/CD&#xff08;Carrier Sense Multiple Access/Collision Detection,载波监听多路访问&#xff09; 冲突域 解决机制&#xff1…
阅读更多...
ChatGPT 都在用的身份认证产品，你了解多少？

ChatGPT 都在用的身份认证产品，你了解多少？

近期&#xff0c;人工智能研究公司 OpenAI 正式推出 ChatGPT&#xff0c;这是一种基于对话的人工智能聊天机器人模型&#xff0c;它能够理解自然语言并以自然语言的方式做出回应。上线不到一周&#xff0c;用户数已经突破 100 万大关。 上线仅 5 天用户数就突破百万大关&#…
阅读更多...
educoder头歌数据结构 查找 第1关：实现折半查找

educoder头歌数据结构 查找 第1关：实现折半查找

本文已收录于专栏 &#x1f332;《educoder数据结构与算法_大耳朵宋宋的博客-CSDN博客》&#x1f332; 任务描述 本关要求通过补全函数BSL_FindKey来实现在已排序的顺序表中查找关键码值为key的结点并返回该结点的编号。 相关知识 折半查找通常是针对顺序存储的线性表&…
阅读更多...
SWOT分析

SWOT分析

什么是SWOT分析?从做法到具体事例、注意点进行解说 SWOT分析法是将本公司的内部环境和外部环境作为强项(Strength)、弱点(Weakness)、机会(Opportunity)、威胁(Threat)进行梳理和分析的手法。以及把握事业现状的框架。从SWOT分析的方法到具体事例、注意事项&#xff0c;以图解…
阅读更多...
砥砺前行，匠心致远｜袋鼠云联合创始人、易知微CEO宁海元荣获“数字工匠 ”

砥砺前行，匠心致远｜袋鼠云联合创始人、易知微CEO宁海元荣获“数字工匠 ”

近期&#xff0c;在余杭区数管局召开的“学习贯彻二十大&#xff0c;聚力建设新中心”联合主题党日活动暨余杭数改企业联盟党建联建共建机制圆桌恳谈会上&#xff0c;袋鼠云联合创始人、易知微CEO宁海元荣获2022年度“余杭数字工匠”&#xff0c;区数管局党组书记、局长周汝琴为…
阅读更多...
【谷粒商城基础篇】商品服务开发：品牌管理

【谷粒商城基础篇】商品服务开发：品牌管理

谷粒商城笔记合集 分布式基础篇分布式高级篇高可用集群篇简介&环境搭建项目简介与分布式概念&#xff08;第一、二章&#xff09;基础环境搭建&#xff08;第三章&#xff09;整合SpringCloud整合SpringCloud、SpringCloud alibaba&#xff08;第四、五章&#xff09;前端知…
阅读更多...
Linux进程间通信----＞共享内存

Linux进程间通信----＞共享内存

文章目录什么是共享内存共享内存基本原理和共享内存有关的系统接口ftokshmgetipc相关命令查看相关共享内存信息删除相关共享内存信息shmat/shmdtshmctlipc系列设计思想总结什么是共享内存 前面我们学习了管进程间通信的一种方式—>管道。 而我们今天将要介绍的共享内存也是…
阅读更多...
10天，几万字，源码深度解析之 Spring IOC

10天，几万字，源码深度解析之 Spring IOC

历时 10 天&#xff0c;终于把 Sping 源码系列写完了&#xff0c;该系列一共 5 篇&#xff0c;后续会整理成 PDF 教程&#xff0c;本文是最后一篇。 这篇文章主要讲解 IOC 容器的创建过程&#xff0c;让你对整体有一个全局的认识&#xff0c;文章没有复杂嵌套的 debug 流程&am…
阅读更多...
SA实战 ·《SpringCloud Alibaba实战》第06章-快速搭建三大微服务并完成交互开发与测试

SA实战 ·《SpringCloud Alibaba实战》第06章-快速搭建三大微服务并完成交互开发与测试

作者：冰河 星球：http://m6z.cn/6aeFbs 博客：https://binghe.gitcode.host 文章汇总：https://binghe.gitcode.host/md/all/all.html 大家好，我是冰河~~ 在《SpringCloud Alibaba实战》专栏中前面的文章，我们为开发用户微服务、商品微服务和订单微服务做了充分的准备。今天…
阅读更多...
微服务 SpringBoot 整合 Redis GEO 实现附近商户功能

微服务 SpringBoot 整合 Redis GEO 实现附近商户功能

文章目录⛄引言♨️广播站一、Redis GEO 数据结构用法⛅GEO基本语法、指令⚡使用GEO存储经纬度、查询距离二、SpringBoot 整合Redis 导入 店铺数据 到GEO三、SpringBoot 整合 Redis 实现 附近商户功能☁️需求介绍⚡核心源码✅附近商户效果图⛵小结⛄引言 本文参考黑马 点评项…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023