详细介绍React路由

news2025/6/21 10:56:51

路由

单页Web应用（single page web application，SPA），整个应用只有一个完整的页面，点击页面中的链接不会刷新页面，只会做页面的局部更新。数据都需要通过ajax请求获取, 并在前端异步展现。

一个路由就是一个映射关系(key:value)，key为路径, value可能是function或component。
后端路由：

  1. 理解：value是function, 用来处理客户端提交的请求。
  2. 注册路由： router.get(path, function(req, res))
  3. 工作过程：当node接收到一个请求时, 根据请求路径找到匹配的路由, 调用路由中的函数来处理请求, 返回响应数据

前端路由：

  1. 浏览器端路由，value是component，用于展示页面内容。
  2. 注册路由: <Route path="/test" component={Test}>
  3. 工作过程：当浏览器的path变为/test时, 当前路由组件就会变为Test组件

React路由

react-router-dom是react的一个插件库，专门用来实现一个SPA应用，基于react的项目基本都会用到此库。使用命令npm i react-router-dom下载。
相关API：内置组件：

1.	<BrowserRouter>
2.	<HashRouter>
3.	<Route>
4.	<Redirect>
5.	<Link>
6.	<NavLink>
7.	<Switch>

v6新版本改动

在版本为6的react-router和react-router-dom的使用中，与旧版有一点差别。

  • Switch变为Routes，所有的Route组件都应该被Routes包裹，在Routes组件外使用Route将报错。
  • Redirect变为Navigate，Navigate组件不能写在Routes中，否则也会报错，也就是Routes组件只接收Route作为其子组件。
  • v6移出了WithRouter，添加了一些新的hooks。

相关文章1
相关文章2

路由的基本使用

//App.jsx

import React, { Component } from 'react'
import {Link,Route} from 'react-router-dom'
import Home from './components/Home'
import About from './components/About'
export default class App extends Component {
	render() {
		return (
			<div>
				{/* 原生html中，靠<a>跳转不同的页面 */}
				{/* <a className="list-group-item" href="./about.html">About</a>
				<a className="list-group-item active" href="./home.html">Home</a> */}
				
				
				{/* 在React中靠路由链接实现切换组件--编写路由链接 */}
				<Link to="/about">About</Link>
				<Link to="/home">Home</Link>
				
				{/* 注册路由，进行路径的匹配 */}
				<Route path="/about" component={About}/>
				<Route path="/home" component={Home}/>
			</div>
		)
	}
}

//index.js
import React from 'react'
import ReactDOM from 'react-dom'
import {BrowserRouter} from 'react-router-dom'
import App from './App'
//<App>的最外侧包裹了一个<BrowserRouter>或<HashRouter>
ReactDOM.render(
	<BrowserRouter>
		<App/>
	</BrowserRouter>,
	document.getElementById('root')
)

在这里插入图片描述

路由组件与一般组件

1.写法不同：
一般组件：<Demo/>
路由组件：<Route path="/demo" component={Demo}/>
2.存放位置不同：
一般组件：components/
路由组件：pages/
3.接收到的props不同：
一般组件：写组件标签时传递了什么，就能收到什么
路由组件：接收到三个固定的属性

history:
			go: ƒ go(n)
			goBack: ƒ goBack()
			goForward: ƒ goForward()
			push: ƒ push(path, state)
			replace: ƒ replace(path, state)
location:
			pathname: "/about"
			search: ""
			state: undefined
match:
			params: {}
			path: "/about"
			url: "/about"

NavLink和Switch

NavLink ：
<Link to="/about">About</Link>的升级版：
<NavLink activeClassName="zagiee" to="/about">About</NavLink>可以多传一个属性，activeClassName，点击当前可以加一个类名，添加一些样式,shi。

Switch：
通常情况下，path和component是一一对应的关系。Switch可以提高路由匹配效率(单一匹配)。

当有多个path相同的情况，不用Switch包的话匹配到home时，第一个匹配了还会往下继续匹配，第二个也会匹配，从而两个都展示，包住后匹配到第一个后就不往下匹配了，从而只显示第一个。

{/* 注册路由 */}
<Switch>
	<Route path="/about" component={About}/>
	<Route path="/home" component={Home}/>
	<Route path="/home" component={Test}/>
</Switch>

解决多级路径刷新页面样式丢失的问题

当路径是多级时，刷新页面可能会造成样式丢失问题。

<Link to="/zagiee/home">Home</Link>
<Route path="/zagiee/home" component={Home}/>

解决方法：
1.public/index.html 中 引入样式时不写 ./ 写 / （常用）
2.public/index.html 中 引入样式时不写 ./ 写 %PUBLIC_URL% （常用）
3.使用HashRouter（不常用）

路由的严格匹配与模糊匹配

1.默认使用的是模糊匹配（输入的路径to必须包含要匹配的路径paath，且顺序要一致）。
2.开启严格匹配：<Route exact={true} path="/about" component={About}/>，简写：<Route exact path="/about" component={About}/>
3.严格匹配不要随便开启，需要再开，有些时候开启会导致无法继续匹配二级路由
4.一般path=”/"这个路由一般会加上exact，否则它也会匹配’/home’导致这个路由就没用了。
另外嵌套路由不要加exact属性，如果父级路由加上，他下面的子路由将不会生效，因为外层强制匹配了

向路由组件传递参数

1.params参数
路由链接(携带参数)：<Link to='/demo/test/tom/18'}>详情</Link>
注册路由(声明接收)：<Route path="/demo/test/:name/:age" component={Test}/>
接收参数：this.props.match.params
2.search参数
路由链接(携带参数)：<Link to='/demo/test?name=tom&age=18'}>详情</Link>
注册路由(无需声明，正常注册即可)：<Route path="/demo/test" component={Test}/>
接收参数：this.props.location.search
备注：获取到的search是urlencoded编码字符串，需要借助querystring解析
3.state参数
路由链接(携带参数)：<Link to={{pathname:'/demo/test',state:{name:'tom',age:18}}}>详情</Link>
注册路由(无需声明，正常注册即可)：<Route path="/demo/test" component={Test}/>
接收参数：this.props.location.state
备注：刷新也可以保留住参数，前两个也可以。

//Message/index.jsx

state = {
		messageArr:[
			{id:'01',title:'消息1'},
			{id:'02',title:'消息2'},
			{id:'03',title:'消息3'},
		]
	}
render() {
	const {messageArr} = this.state
	return (
		<div>
			<ul>
				{
					messageArr.map((msgObj)=>{
						return (
							<li key={msgObj.id}>

								{/* 向路由组件传递params参数 */}
								{/* <Link to={`/home/message/detail/${msgObj.id}/${msgObj.title}`}>{msgObj.title}</Link> */}

								{/* 向路由组件传递search参数 */}
								{/* <Link to={`/home/message/detail/?id=${msgObj.id}&title=${msgObj.title}`}>{msgObj.title}</Link> */}

								{/* 向路由组件传递state参数，双括号是对象，单括号是js模板字符串，前两种也能写成对象形式 */}
								<Link to={{pathname:'/home/message/detail',state:{id:msgObj.id,title:msgObj.title}}}>{msgObj.title}</Link>

							</li>
						)
					})
				}
			</ul>			
			<hr/>
			{/* 声明接收params参数 */}
			{/* <Route path="/home/message/detail/:id/:title" component={Detail}/> */}
			
			{/* search参数无需声明接收，正常注册路由即可 */}
			{/* <Route path="/home/message/detail" component={Detail}/> */}
			
			{/* state参数无需声明接收，正常注册路由即可 */}
			<Route path="/home/message/detail" component={Detail}/>
		</div>

//Message/Detail/index.jsx
import React, { Component } from 'react'
// import qs from 'qs'

const DetailData = [
	{id:'01',content:'你好，中国'},
	{id:'02',content:'你好，尚硅谷'},
	{id:'03',content:'你好，未来的自己'}
]
export default class Detail extends Component {
	render() {
		console.log(this.props);

		// 接收params参数
		// const {id,title} = this.props.match.params 

		// 接收search参数
		// const {search} = this.props.location
		// const {id,title} = qs.parse(search.slice(1))

		// 接收state参数,加 || {}是为了防止报错，有值就用，没值就undefined
		const {id,title} = this.props.location.state || {}

		const findResult = DetailData.find((detailObj)=>{
			return detailObj.id === id
		}) || {}
		return (
			<ul>
				<li>ID:{id}</li>
				<li>TITLE:{title}</li>
				<li>CONTENT:{findResult.content}</li>
			</ul>
		)
	}
}

push和replace

push：当前看到的是栈顶地址，点击回退会出栈然后回到上一个页面（message）。
在这里插入图片描述

replace是用它替换栈顶地址，回退会回到news。

<Link replace to={`/home/message/detail/?id=${msgObj.id}&title=${msgObj.title}`}>{msgObj.title}</Link>

在这里插入图片描述

编程式路由导航

借助this.prosp.history对象上的API对操作路由跳转、前进、后退

this.prosp.history.push()
this.prosp.history.replace()
this.prosp.history.goBack()
this.prosp.history.goForward()
this.prosp.history.go()

export default class Message extends Component {
	state = {
		messageArr:[
			{id:'01',title:'消息1'},
			{id:'02',title:'消息2'},
			{id:'03',title:'消息3'},
		]
	}

	replaceShow = (id,title)=>{
		//replace跳转+携带params参数
		//this.props.history.replace(`/home/message/detail/${id}/${title}`)

		//replace跳转+携带search参数
		// this.props.history.replace(`/home/message/detail?id=${id}&title=${title}`)

		//replace跳转+携带state参数
		this.props.history.replace(`/home/message/detail`,{id,title})
	}

	pushShow = (id,title)=>{
		//push跳转+携带params参数
		// this.props.history.push(`/home/message/detail/${id}/${title}`)

		//push跳转+携带search参数
		// this.props.history.push(`/home/message/detail?id=${id}&title=${title}`)

		//push跳转+携带state参数
		this.props.history.push(`/home/message/detail`,{id,title})
		
	}

	back = ()=>{
		this.props.history.goBack()
	}

	forward = ()=>{
		this.props.history.goForward()
	}

	go = ()=>{
		this.props.history.go(-2)
	}

	render() {
		const {messageArr} = this.state
		return (
			<div>
				<ul>
					{
						messageArr.map((msgObj)=>{
							return (
								<li key={msgObj.id}>

									{/* 向路由组件传递params参数 */}
									{/* <Link to={`/home/message/detail/${msgObj.id}/${msgObj.title}`}>{msgObj.title}</Link> */}

									{/* 向路由组件传递search参数 */}
									{/* <Link to={`/home/message/detail/?id=${msgObj.id}&title=${msgObj.title}`}>{msgObj.title}</Link> */}

									{/* 向路由组件传递state参数 */}
									<Link to={{pathname:'/home/message/detail',state:{id:msgObj.id,title:msgObj.title}}}>{msgObj.title}</Link>

									&nbsp;<button onClick={()=> this.pushShow(msgObj.id,msgObj.title)}>push查看</button>
									&nbsp;<button onClick={()=> this.replaceShow(msgObj.id,msgObj.title)}>replace查看</button>
								</li>
							)
						})
					}
				</ul>
				<hr/>
				{/* 声明接收params参数 */}
				{/* <Route path="/home/message/detail/:id/:title" component={Detail}/> */}

				{/* search参数无需声明接收，正常注册路由即可 */}
				{/* <Route path="/home/message/detail" component={Detail}/> */}

				{/* state参数无需声明接收，正常注册路由即可 */}
				<Route path="/home/message/detail" component={Detail}/>

				<button onClick={this.back}>回退</button>&nbsp;
				<button onClick={this.forward}>前进</button>&nbsp;
				<button onClick={this.go}>go</button>

			</div>
		)
	}
}

withRouter

withRouter可以加工一般组件，让一般组件具备路由组件所特有的API，withRouter的返回值是一个新组件。

//一般组件Header/index.jsx
import {withRouter} from 'react-router-dom'
class Header extends Component {
	……
}
export default withRouter(Header)

BrowserRouter与HashRouter的区别

1.底层原理不一样
BrowserRouter使用的是H5的history API，不兼容IE9及以下版本。
HashRouter使用的是URL的哈希值。
2.path表现形式不一样
BrowserRouter的路径中没有#,例如：localhost:3000/demo/test
HashRouter的路径包含#,例如：localhost:3000/#/demo/test
3.刷新后对路由state参数的影响
(1).BrowserRouter没有任何影响，因为state保存在history对象中。
(2).HashRouter刷新后会导致路由state参数的丢失！！！
4.备注：HashRouter可以用于解决一些路径错误相关的问题。

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

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

相关文章

高通SDX12：ProSLIC Si32185移植调试

高通SDX12：ProSLIC Si32185移植调试

一、SLIC业务流程图 本次在高通SDX12平台上支持语音芯片Si32185大致流程如下： 驱动部分直接放在Kernel中，通过SPI注册设备创建字符节点，与硬件建立连接注册设备成功并在audio_kernel中正确配置FE、BE后，声卡会创建出来应用层直接放在apps_proc下，通过IOCTL操作驱动层，通…
阅读更多...
操作系统、输入法和编码的理解

操作系统、输入法和编码的理解

操作系统和输入法 操作系统有一个输入法管理器&#xff0c;叫做IMM,管理系统内的所有输入法&#xff0c;或者说一个输入法想要使用操作系统提供的输入法API,就必须在IMM进行注册。 应用程序和输入法 应用程序一般都会使用输入法&#xff0c;也就是调用输入法的api进行文字输…
阅读更多...
Spring boot+Vue3博客平台:文章搜索与推荐和文章阅读统计模块

Spring boot+Vue3博客平台:文章搜索与推荐和文章阅读统计模块

一、文章搜索与推荐功能 1.前端搜索功能实现 在文章列表组件中添加搜索框&#xff0c;用户可以输入关键字进行文章搜索。同时&#xff0c;在搜索结果下方展示相关文章推荐。 <template><div class"article-list"><div class"search">&…
阅读更多...
手写vuex4源码（六）命名空间实现

手写vuex4源码（六）命名空间实现

一、命名空间使用 在子模块对象中添加 namespaced&#xff1a;true&#xff0c;为模块开启命名空间功能&#xff1b; 开启命名空间功能&#xff0c;相当于为每个模块添加独立的作用域&#xff0c;实现模块间状态和事件的隔离&#xff1b; 二、命名空间实现逻辑 在模块注册阶…
阅读更多...
Vue3+Typescript+Vitest单元测试环境+组件测试基础篇

Vue3+Typescript+Vitest单元测试环境+组件测试基础篇

上一章我们把环境配置好了&#xff0c;并且进行了最简单的一个单元测试Vue3TypescriptVitest单元测试环境基础用例篇 现在让我们去编写一个最简单的组件 这个代码包含最简单的部分&#xff0c;就是一个按钮&#xff0c;接受一个内容插槽、自身有一个button样式 了解相关API…
阅读更多...
JavaWeb——File类和InputStream，OutputStream类详解

JavaWeb——File类和InputStream，OutputStream类详解

目录 一、File类 1、定义 2、属性 3、构造方法 4、方法 &#xff08;1&#xff09;、获取文件路径 &#xff08;2&#xff09;、文件的创建和删除 &#xff08;3&#xff09;、目录的创建 二、InputStream和OutputStream 1、InputStream &#xff08;1&#xff09;、…
阅读更多...
从头创建一个新的浏览器，这合理吗？

从头创建一个新的浏览器，这合理吗？

从头构建一个新浏览器&#xff1f;这如果是不是个天大的“伪需求”&#xff0c;便是一场开发者的噩梦&#xff01; 要知道&#xff0c;如果没有上百亿的资金和数百名研发工程师的投入&#xff0c;从头开始构建一个新的浏览器引擎&#xff0c;几乎是不可能的。然而SerenityOS系统…
阅读更多...
AI风暴 ：文心一言 VS GPT-4

AI风暴 ：文心一言 VS GPT-4

&#x1f497;wei_shuo的个人主页 &#x1f4ab;wei_shuo的学习社区 &#x1f310;Hello World &#xff01; 文心一言 VS GPT-4 文心一言&#xff1a;知识增强大语言模型百度全新一代知识增强大语言模型&#xff0c;文心大模型家族的新成员&#xff0c;能够与人对话互动&#…
阅读更多...
代码随想录Day49

代码随想录Day49

今天继续学习动规解决完全背包问题。 322.零钱兑换 给你一个整数数组 coins &#xff0c;表示不同面额的硬币&#xff1b;以及一个整数 amount &#xff0c;表示总金额。 计算并返回可以凑成总金额所需的最少的硬币个数 。如果没有任何一种硬币组合能组成总金额&#xff0c;…
阅读更多...
虹科分享 | 使用IOTA检查受3CX DLL旁加载攻击影响的客户端 | 网络性能监控

虹科分享 | 使用IOTA检查受3CX DLL旁加载攻击影响的客户端 | 网络性能监控

2023年3月底&#xff0c;VoIP制造商3CX&#xff08;流行的互联网语音协议&#xff08;VoIP&#xff09;专用交换机&#xff08;PBX&#xff09;电话系统的开发商&#xff09;遭到DLL旁加载攻击。他们的软件被大约60万家公司和1200万用户使用&#xff0c;其中包括梅赛德斯-奔驰、…
阅读更多...
人工智能中的监督学习到底是啥？其应用方向有哪些？

人工智能中的监督学习到底是啥？其应用方向有哪些？

人工智能&#xff08;Artificial Intelligence, AI&#xff09;是一门致力于使机器能够像人类一样进行智能决策和行为的学科。监督学习&#xff08;Supervised Learning&#xff09;是人工智能领域中的一种重要学习方式&#xff0c;通过使用标注好的样本数据来训练模型&#xf…
阅读更多...
零基础如何入门网络安全？【2023最新】

零基础如何入门网络安全？【2023最新】

前言 最近收到不少关注朋友的私信和留言&#xff0c;大多数都是零基础小友入门网络安全&#xff0c;需要相关资源学习。其实看过的铁粉都知道&#xff0c;之前的文里是有过推荐过的。新来的小友可能不太清楚&#xff0c;这里就系统地叙述一遍。 01.简单了解一下网络安全 说白…
阅读更多...
Linux 操作系统原理 — 内核协议栈收包/发包流程

Linux 操作系统原理 — 内核协议栈收包/发包流程

目录 文章目录目录关键技术NIC DMAKernel 中的 sk_buff 与 sk_bufferKernel 中的 Rx/Tx RingBuffer Descriptor Table中断收包机制NAPI 收包机制多队列网卡内核协议栈收包/发包流程概览内核协议栈收包流程详解驱动程序层&#xff08;数据链路层&#xff09;VLAN 协议族Linux Br…
阅读更多...
基于MATLAB的语音识别仿真系统

基于MATLAB的语音识别仿真系统

本文实现的语音识别系统&#xff0c;主要是对语音识别的特征参数的提取和识别模型的匹配&#xff0c;进行深入的研究。首先,对语音识别进行了概述&#xff0c;给出了语音识别的系统框架。然后就是如何实现语音识别的问题&#xff0c;这个过程可分为两个部分:第一个是语音特征参…
阅读更多...
【Ruby 2D】【unity learn】控制敌人随机运动以及动画控制

【Ruby 2D】【unity learn】控制敌人随机运动以及动画控制

前两天考完蓝桥杯稍微休息了一下&#xff0c;昨天做了一个动画控制&#xff0c;但是想到写出来可能会字很多&#xff0c;我就搁置到今天来写了&#xff0c;unity learn是一个官方教程平台&#xff0c;里面有unity assert store的配套教程&#xff0c;全是文档&#xff0c;比看视…
阅读更多...
#java mavn安装图像验证码jar失败kaptcha-2.3.2.jar#

#java mavn安装图像验证码jar失败kaptcha-2.3.2.jar#

场景&#xff1a;在登录的时候添添加图形验证码功能&#xff0c;使用 com.google.code.kaptcha开发图像验证码&#xff0c;。通过pom引入依赖一直红色提示&#xff0c;找打不到依赖,如图所示 原因&#xff1a;kaptcha-2.3.jar 没有放在mavan的中央仓库 解决方案&#xff0c;需…
阅读更多...
Hive笔记

Hive笔记

目录 第3章 Hive数据类型 第 4 章 DDL 数据定义 第5章DML数据操作 第6章 查询&#xff08;语法与MySQL一样&#xff09; 第 7 章 分区表和分桶表 第 8 章 函数 第3章 Hive数据类型 如array<map<string,int>> 集合数据类型工作中不是很常用&#xff0c;最常用…
阅读更多...
Web 攻防之业务安全：Response状态值修改测试（修改验证码返回值 绕过限制.）

Web 攻防之业务安全：Response状态值修改测试（修改验证码返回值 绕过限制.）

Web 攻防之业务安全&#xff1a;Response状态值修改测试 业务安全是指保护业务系统免受安全威胁的措施或手段。广义的业务安全应包括业务运行的软硬件平台&#xff08;操作系统、数据库&#xff0c;中间件等&#xff09;、业务系统自身&#xff08;软件或设备&#xff09;、业务…
阅读更多...
2.17、多生产者-多消费者进程

2.17、多生产者-多消费者进程

桌子上有一只盘子&#xff0c;每次只能向其中放入一个水果。爸爸专向盘子中放苹果&#xff0c;妈妈专向盘子中放橘子&#xff0c;儿子专等着吃盘子中的橘子&#xff0c;女儿专等着吃盘子中的苹果。只有盘子空时&#xff0c;爸爸或妈妈才可向盘子中放一个水果。仅当盘子中有自己…
阅读更多...
Linux系统应用编程（四）Linux多线程

Linux系统应用编程（四）Linux多线程

本篇文章主要内容&#xff1a;Linux系统应用编程&#xff08;四&#xff09;Linux多线程一、线程和进程的区别二、Linux多线程1.线程的使用 - 创建、退出、等待2.线程的同步 - 互斥量&#xff08;1&#xff09;互斥量的理解&#xff08;略&#xff09;&#xff08;2&#xff09…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023