第40节——路由初识,定义路由组件

文档地址
http://www.reactrouter.cn/docs/getting-started/tutorial

version

V6.x

一、什么是路由

前端路由指的是一种将浏览器URL与特定页面或视图关联起来的技术。在传统的Web开发中,当用户点击链接或者输入URL时,服务器会接收到请求并返回相应的HTML页面。而在前端路由中,当用户点击链接或者输入URL时,浏览器会根据路由规则对URL进行解析,并使用JavaScript控制页面的展示。

前端路由通常使用JavaScript库来实现,比如React Router、Vue Router等。它们允许开发者定义路由规则,并根据这些规则来显示不同的组件或页面。例如,当用户点击一个链接时,前端路由会将URL解析为一个路由路径,然后根据路径匹配相应的组件或页面并显示在页面上,而不需要向服务器发起请求。

前端路由可以提高Web应用的性能和用户体验,因为它允许应用实现快速的页面切换和动态的内容加载,同时减少了服务器的负载。

二、安装

// 注意:我们用的是6.x的版本
npm install react-router-dom

三、路由模式

1、HashRouter

HashRouter使用URL的哈希部分(即#后面的部分)来匹配路由,它不会向服务器发送请求。例如,URL可以是http://example.com/#/about。HashRouter兼容性比较好,哪怕浏览器不支持HTML5 History API也可以正常使用。

2、BrowserRouter

BrowserRouter使用HTML5 History API来匹配路由,使用 HTML5 的 pushState 和 replaceState API 来实现路由的切换。它可以隐藏URL中的#符号,使URL更加友好。例如,URL可以是http://example.com/about

3、MemoryRouter

MemoryRouter是一个不依赖于浏览器历史记录的路由器。它将URL存储在内存中,而不是浏览器历史记录中,适用于测试或在不支持HTML5 History API的环境中使用

4、StaticRouter

StaticRouter是一个用于服务器端渲染的路由器。它将请求的URL作为参数传递给组件,并将组件的输出发送回客户端。这样就可以在服务器端生成动态HTML,然后将其发送到浏览器。

5、NativeRouter

NativeRouter是用于React Native应用的路由器,它使用Native导航而不是HTML导航来匹配路由

接下来我们以HashRouter模式为例进行我们的路由学习

四、react-router-dom 有哪些组件

1、HashRouter组件以及其他路由模式组件

用于创建一个路由容器,使得我们可以在浏览器中使用路由。它包裹整个应用程序,并提供了一个路由的上下文环境。

2、Route组件

用于将一个路由路径与一个组件进行映射。当浏览器 URL 与 Route 组件所定义的路径匹配时,该组件就会被渲染到页面上

常用属性
属性名类型默认值描述
pathstring用于匹配 URL 的路径。
elementReactNode指定路由匹配成功后要渲染的组件。
caseSensitivebooleanfalse指定路径匹配时是否区分大小写。
sensitivebooleanfalse指定路径匹配时是否严格匹配大小写和斜杠。
locationstring | object指定要匹配的位置。
navigatebooleantrue当路由匹配成功后是否进行页面导航。
elementPropsobject传递给渲染组件的属性对象。
preloadfunction用于预加载组件。
caseSensitivebooleanfalse指定路径匹配时是否区分大小写。
sensitivebooleanfalse指定路径匹配时是否严格匹配大小写和斜杠。
redirectTostring当路由匹配成功后要重定向到的路径。
redirectPathstring当路由匹配成功后要重定向到的路径。
replacebooleanfalse当页面导航时是否使用 replace 而非 push
caseSensitivebooleanfalse指定路径匹配时是否区分大小写。
sensitivebooleanfalse指定路径匹配时是否严格匹配大小写和斜杠。
preventDefaultbooleanfalse是否阻止默认的页面导航行为。
whenboolean | functrue指定条件是否匹配,用于控制是否进行页面导航。
classNamestring为路由渲染的元素指定 CSS 类名。
styleobject为路由渲染的元素指定样式对象。
titlestring页面标题,用于在路由变化时更新页面标题。
metaany
例子
import { Route, Routes } from 'react-router-dom';function App() {return (<div><Routes><Route exact path="/" element={Home} /><Route path="/about" element={About} /></Routes></div>);
}

3、Routes组件

Routes 组件是 React Router v6 中的一个组件,它的作用是用于定义应用程序的路由规则。与 React Router v5 中的 组件类似,Routes 组件包含多个 子组件,用于指定不同的路径和对应的组件。

Routes 组件可以让我们更加灵活地定义路由规则。与 React Router v5 中的 组件只能按顺序匹配第一个符合条件的路由不同,Routes 组件可以匹配多个路由,并根据 path 属性的优先级选择最匹配的路由。例如,如果同时定义了 /users/:id 和 /users/new 两个路由规则,当访问 /users/new 时,React Router v6 会选择匹配优先级更高的 /users/new 路由,而不是直接匹配第一个符合条件的路由

import { Route, Routes } from 'react-router-dom';function App() {return (<Routes><Route exact path="/" element={Home} /><Route path="/about" element={About} /></Routes>);
}

4、Link组件

用于创建一个链接,使得用户可以通过点击链接来访问应用程序的不同路由路径。它会生成一个 标签,并根据传入的 to 属性生成正确的 href 属性。

import { Link } from 'react-router-dom';function Home() {return (<div><ul><li><Link to="/a">A页面</Link></li><li><Link to="/b">B页面</Link></li></ul></div>);
}

5、NavLink

与 类似,也用于创建一个链接,但它会在当前路由匹配成功时添加一个指定的类名,以便样式上的区分。

import { NavLink } from 'react-router-dom';/**
当点击链接的时候会自动激活activeClassName属性的className
*/
function Navbar() {return (<nav><ul><li><NavLink to="/a" activeClassName="active">a页面</NavLink></li><li><NavLink to="/b" activeClassName="active">b页面</NavLink></li></ul></nav>);
}

6、Redirect

用于重定向用户到另一个路由路径。当用户访问当前路径时,会自动跳转到指定的路径。

在使用Redirect组件时,您需要在路由配置中使用它而不是在组件中使用它。例如,如果您想在用户访问/home时重定向到/dashboard,则可以像这样设置路由

import { Route, Routes, Redirect } from 'react-router-dom';
import Dashboard from './Dashboard';function App() {return (<Routes><Route path="/dashboard" element={<Dashboard />} /><Route path="/home" element={<Redirect to="/dashboard" />} /></Routes>);
}

7、Prompt

用于在用户离开当前页面之前提示用户。可以用来防止用户在填写表单时误操作导致数据丢失。

五、react-router-dom中常用的hooks

1、useNavigate

用于在组件中进行导航、跳转等操作,与 useHistory 功能类似,但提供了更丰富的 API,例如可以使用命名路由进行跳转。

所谓的命名理由就是Route组件上定义的name属性,然后在跳转的时候直接穿name即可。

2、useParams

用于获取 URL 中的参数,例如 /users/:id 中的 id

3、useLocation

用于访问当前页面的位置信息,包括 URL 中的路径、查询参数、哈希等。

4、useMatch

用于获取当前页面的匹配信息,例如路由规则中的路径、参数等,与 useRouteMatch 功能类似

5、useOutlet

用于在父组件中呈现子路由组件,可以将子路由组件放在特定位置。也就是展示嵌套路由。

import { useOutlet } from 'react-router-dom';function App() {const outlet = useOutlet();return (<div><h1>这是应用程序的头部</h1>{/* 在这里渲染子路由组件 */}{outlet}<h1>这是应用程序的底部</h1></div>);
}

路由定义嵌套路由

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';function App() {return (<Router><Routes><Route path="/" element={<Home />} /><Route path="/about" element={<About />} /><Route path="/users" element={<Users />}>{/* 子路由 */}<Route path="/" element={<UserList />} /><Route path=":id" element={<UserProfile />} /></Route></Routes></Router>);
}

6、useRoutes

根据规则动态渲染路由。

注意:

在使用 useRoutes 钩子函数时,需要将其作为根组件渲染,而不是将其作为子组件嵌套在其他组件中。这是因为 useRoutes 钩子函数需要访问 react-router-dom 的上下文,从而能够进行路由匹配和导航操作。

import { useRoutes } from 'react-router-dom';function App() {const routes = useRoutes([{ path: '/', element: <Home /> },{ path: '/about', element: <About /> },{ path: '/contact', element: <Contact /> },{ path: '/users/:id', element: <User /> },]);return <div>{routes}</div>;
}

六、基本使用

1、创建a、b、c三个组件文件,内容任意

2、创建router-component.jsx文件

/*** 从react-router-dom中 引用HashRouter 是一个组件* 如果需要别的模式那就引入其他模式**/
import React from "react";
import { HashRouter, Route, Routes } from "react-router-dom";
import APage from "./learn-router/a";
import BPage from "./learn-router/b";
import CPage from "./learn-router/c";export default function RouterComponent() {return (// 首先确定什么模式,那么最上层组件就是用这个模式<HashRouter><Routes><Route path="/" element={<APage />} /><Route path="/b" element={<BPage />} /><Route path="/b" element={<CPage />}></Route></Routes></HashRouter>);
}

3、在入口文件处引入

import React from "react";
import ReactDOM from "react-dom/client";
import RouterComponent from "./rotuerComponent";const root = ReactDOM.createRoot(document.getElementById("root"));root.render(<RouterComponent />
);

4、在url地址直接输入地址就可以切换不同的页面

http://localhost:3000/

http://localhost:3000/#/b

http://localhost:3000/#/c

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

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

相关文章

专栏更新情况:华为流程、产品经理、战略管理、IPD

目录 前言 01 华为流程体系入门课 CSDN学院 02 产品经理进阶课 CSDN学院 03 BLM 战略方法论进阶课 04 IPD 进阶 100 例专栏 作者简介 前言 已上线四大课程专栏更新情况&#xff1a; 01 华为流程体系入门课&#xff08;视频图文&#xff09;&#xff1b; 02 硬件产品经…

安防监控产品经营商城小程序的作用是什么

安防监控产品覆盖面较大&#xff0c;监控器、门禁、对讲机、烟感等都有很高用途&#xff0c;家庭、办公单位各场景往往用量不少&#xff0c;对商家来说&#xff0c;市场高需求背景下也带来了众多生意&#xff0c;但线下门店的局限性&#xff0c;导致商家想要进一步增长不容易。…

C++之容器类有趣的实验(二百四十一)

简介&#xff1a; CSDN博客专家&#xff0c;专注Android/Linux系统&#xff0c;分享多mic语音方案、音视频、编解码等技术&#xff0c;与大家一起成长&#xff01; 优质专栏&#xff1a;Audio工程师进阶系列【原创干货持续更新中……】&#x1f680; 人生格言&#xff1a; 人生…

无线WIFI工业路由器可用于楼宇自动化

钡铼4G工业路由器支持BACnet MS/TP协议。BACnet MS/TP协议是一种用于工业自动化的开放式通信协议&#xff0c;被广泛应用于楼宇自动化、照明控制、能源管理等领域。通过钡铼4G工业路由器的支持&#xff0c;可以使设备间实现高速、可靠的数据传输&#xff0c;提高自动化水平。 钡…

Kubernetes(k8s)上搭建一主两从的mysql8集群

Kubernetes上搭建一主两从的mysql8集群 环境准备搭建nfs服务器安装NFS暴露nfs目录开启nfs服务器 安装MySQL集群创建命名空间创建MySQL密码的Secret安装MySQL主节点创建pv和pvc主节点的配置文件部署mysql主节点 安装第一个MySQL Slave节点创建pv和pvc第一个从节点配置文件部署my…

centos给用户分配docker权限

原理 docker守护进程启动的时候&#xff0c;会默认赋予名为docker的用户组读写Unix socket的权限&#xff0c;因此只要创建docker用户组&#xff0c;并将当前用户加入到docker用户组中&#xff0c;那么当前用户就有权限访问Unix socket了&#xff0c;进而也就可以执行docker相…

在 EMR Serverless 上使用 Delta Lake

本文是一份开箱即用的全自动测试脚本&#xff0c;用于在 EMR Serverless 上提交一个 Delta Lake 作业。本文完全遵循《最佳实践&#xff1a;如何优雅地提交一个 Amazon EMR Serverless 作业&#xff1f;》 一文给出的标准和规范&#xff01; 1. 导出环境相关变量 注意&#x…

聚观早报 | 飞书签约韵达速递;蔚来首颗自研芯片“杨戬”量产

【聚观365】9月22日消息 飞书签约韵达速递 蔚来首颗自研芯片“杨戬”10月量产 靳玉志接任华为车 BU CEO 亚马逊发布全新Alexa语音助手 OpenAI推出图像生成器DALL-E 3 飞书签约韵达速递 近日&#xff0c;国内物流服务公司韵达快递宣布全员上飞书。飞书解决方案副总裁何斌表…

Redis学习第九天

今天是Jedis&#xff01;作者的Redis在游戏本上&#xff0c;但是Java的IDEA总是下载不了&#xff0c;所以只能作为概念听一听了&#xff0c;目前无法做到实操。 Jedis概念 Jedis实操 首先要保证redis的服务器开启&#xff0c;然后引入jedis依赖&#xff0c;最后通过服务器的I…

蓝桥等考Python组别七级005

第一部分:选择题 1、Python L7 (15分) 下面for循环语句中,变量i的取值范围是( )。 for i in range(1, 9): print(i) 1~91~80~90~8正确答案:B 2、Python L7 (15分) 下面哪一年是闰年?( ) 2022年

Java新领域—设计

SSM SpringBoot 微信小程序 JSP 安卓

人工智能安全-2-非平衡数据处理(2)

5 算法层面 代价敏感&#xff1a;设置损失函数的权重&#xff0c;使得少数类判别错误的损失大于多数类判别错误的损失&#xff1b; 单类分类器方法&#xff1a;仅对少数类进行训练&#xff0c;例如运用SVM算法&#xff1b; 集成学习方法&#xff1a;即多个分类器&#xff0c;然…

大模型lora微调-chatglm2

通义千问大模型微调源码&#xff08;chatglm2 微调失败&#xff0c;训练通义千问成功&#xff09;&#xff1a;GitHub - hiyouga/LLaMA-Efficient-Tuning: Easy-to-use LLM fine-tuning framework (LLaMA-2, BLOOM, Falcon, Baichuan, Qwen, ChatGLM2)Easy-to-use LLM fine-tun…

Python 同、异步HTTP客户端封装:性能与简洁性的较量

一、前言 引入异步编程趋势&#xff1a;Python的异步编程正变得越来越流行。在过去&#xff0c;同步的HTTP请求已经不足以满足对性能的要求。异步HTTP客户端库的流行&#xff1a;目前&#xff0c;有许多第三方库已经实现了异步HTTP客户端&#xff0c;如aiohttp和httpx等。然而…

[JAVAee]MyBatis

目录 MyBatis简介 MyBatis的准备工作 框架的添加 连接数据库字符串的配置 MyBatis中XML路径的配置 ​编辑 MyBatis的使用 各层的实现 进行数据库操作 增加操作 拓展 修改操作 删除操作 查询操作 结果映射 单表查询 多表查询 like模糊查询 动态SQL / MyBa…

delphi 11 安装失败

delphi 11 安装遇到如下图&#xff1a; 解决方法&#xff1a; 以管理员身份重新安装&#xff01;&#xff01;&#xff01; 以管理员身份重新安装&#xff01;&#xff01;&#xff01; 以管理员身份重新安装&#xff01;&#xff01;&#xff01; 管理员身份&#xff01;&…

同城信息服务源码 本地生活服务小程序源码

同城信息服务源码 本地生活服务小程序源码 功能介绍&#xff1a; 基本设置&#xff1a;网站参数、安全设置、分站管理、支付设置、操作日志、地区设置、公交地铁、国际区号、清理缓存、模板风格、模块管理、域名管理、底部菜单、消息通知、登录设置 其他设置&#xff1a;关键…

企业年报API的应用:从金融投资到市场研究

引言 在数字化时代&#xff0c;企业年报不再仅仅是一份财务报告&#xff0c;它们变成了宝贵的信息资源&#xff0c;可用于各种商业应用。企业年报API已经改变了金融投资和市场研究的方式&#xff0c;使得从中获取数据变得更加高效和灵活。本文将深入探讨企业年报API的应用&…

箱讯科技成功闯入第八届“创客中国”全国总决赛—在国际物流领域一枝独秀

添加图片注释&#xff0c;不超过 140 字&#xff08;可选&#xff09; 2023年9月26日&#xff0c;第八届“创客中国”数字化转型中小企业创新创业大赛决赛在贵州圆满收官。 经过初赛、复赛、决赛的激烈角逐&#xff0c;箱讯科技与众多强劲对手同台竞技&#xff0c;最终凭借出…

“全景江西·南昌专场”数字技术应用场景发布会 | 万广明市长莅临拓世集团展位,一览AIGC科技魅力

随着数字技术的迅猛发展&#xff0c;传统产业正在发生深刻的变革&#xff0c;新兴产业蓬勃兴起。但要想实现数字经济超常规发展&#xff0c;就要在数字产业化上培育新优势&#xff0c;大力实施数字经济核心产业提速行动&#xff0c;加快推进“一核三基地”建设。在这个数字经济…