黑马React18: ReactRouter

黑马React: ReactRouter

Date: November 21, 2023
Sum: React路由基础、路由导航、导航传参、嵌套路由配置

路由快速上手



1. 什么是前端路由

一个路径 path 对应一个组件 component 当我们在浏览器中访问一个 path 的时候,path 对应的组件会在页面中进行渲染

image-20231122164744367



2. 创建路由开发环境

# 使用CRA创建项目
npx create-react-app react-router-pro# 安装最新的ReactRouter包
npm i react-router-dom# 启动项目
npm run start


3. 快速开始

image-20231122164759343

import React from 'react'
import ReactDOM from 'react-dom/client'const router = createBrowserRouter([{path:'/login',element: <div>登录</div>},{path:'/article',element: <div>文章</div>}
])ReactDOM.createRoot(document.getElementById('root')).render(<RouterProvider router={router}/>
)



抽象路由模块

image-20231122164847326




路由导航

1. 什么是路由导航

路由系统中的多个路由之间需要进行路由跳转,并且在跳转的同时有可能需要传递参数进行通信

image-20231122164835301



2. 声明式导航

声明式导航是指通过在模版中通过 组件描述出要跳转到哪里去,比如后台管理系统的左侧菜单通常使用这种方式进行

<Link to="/article">文章</Link>

语法说明:通过给组件的to属性指定要跳转到路由path,组件会被渲染为浏览器支持的a链接,如果需要传参直接通过字符串拼接的方式拼接参数即可



3. 编程式导航

编程式导航是指通过 useNavigate 钩子得到导航方法,然后通过调用方法以命令式的形式进行路由跳转,比如想在登录请求完毕之后跳转就可以选择这种方式,更加灵活

语法说明:通过调用navigate方法传入地址path实现跳转

import { Link, useNavigate } from 'react-router-dom'const Login = () => {const navigate = useNavigate()return (<div>我是登陆页{/* 声明式写法 */}<Link to="/article">跳转到文章页</Link>{/* 命令式写法 */}<button onClick={() => navigate('/article')}>跳转到文章页</button></div>)
}export default Login



导航传参

image-20231122164826453

searchParams传参:

src/page/Article/index.js

import { useSearchParams } from "react-router-dom"const Artitlce = () => {const [params] = useSearchParams()const id = params.get('id')const name = params.get('name')return <div>我是文章页 - {id} - {name}</div>
}export default Artitlce

params传参:

src/page/Article/index.js

import { useSearchParams, useParams } from "react-router-dom"const Artitlce = () => {// const [params] = useSearchParams()// const id = params.get('id')// const name = params.get('name')const params = useParams()let id = params.idlet name = params.name// return <div>我是文章页 - {id} - {name}</div>return <div>我是文章页 - {id} - {name}</div>
}export default Artitlce

src/router/index.js

import Login from '../page/Login/index'
import Article from '../page/Article/index'import { createBrowserRouter } from 'react-router-dom'const router = createBrowserRouter([{path: '/login',element: <Login/>},{// path: '/article',path: '/article/:id/:name', // 配置router中的id与nameelement: <Article/>},
])export default router

注意:采用 params 这种方式需要配置一波router




嵌套路由配置

1. 什么是嵌套路由

在一级路由中又内嵌了其他路由,这种关系就叫做嵌套路由,嵌套至一级路由内的路由又称作二级路由,例如:

Untitled



2. 嵌套路由配置

实现步骤:

  1. 使用 children属性配置路由嵌套关系

  2. 使用 <Outlet/> 组件配置二级路由渲染位置

Case:

Code:

router/index.js

const router = createBrowserRouter([{path: '/',element: <Layout/>,children: [{path: 'board',element: <Board/>},{path: 'About',element: <About/>}]},{path: '/login',element: <Login/>,},{// path: '/article',path: '/article/:id/:name',element: <Article/>},
])

src/page/Layout/index.js

const Layout = () => {return (<div>我是一级路由layout组件--<Link to="/board">面板</Link>--<Link to="/about">关于</Link>{/* 配置二级路由出口 */}<Outlet></Outlet></div>)
}

Res:

Untitled

拓展

路由出口:路径匹配的组件显示的位置

参考:路由出口的基础知识

Vue2:路由



3. 默认二级路由

需求:默认就显示二级路由,比如默认显示面板

当访问的是一级路由时,默认的二级路由组件可以得到渲染,只需要在二级路由的位置去掉path,设置index属性为true

Untitled

router.js

const router = createBrowserRouter([{path: '/',element: <Layout/>,children: [{index: true,  // 默认显示 indexelement: <Board/>},{path: 'About',element: <About/>}]},{path: '/login',element: <Login/>,},{// path: '/article',path: '/article/:id/:name',element: <Article/>},
])

Layout/index.js

这里需要把

import { Outlet, Link } from "react-router-dom"
import Board from "../Board"
import About from "../About"const Layout = () => {return (<div>我是一级路由layout组件--<Link to="/">面板</Link> // 修改原来的 to="/board" 变为 to="/"--<Link to="/about">关于</Link>{/* 配置二级路由出口 */}<Outlet></Outlet></div>)
}export default Layout


4. 404路由配置

场景:当浏览器输入url的路径在整个路由配置中都找不到对应的 path,为了用户体验,可以使用 404 兜底组件进行渲染

实现步骤

  1. 准备一个NotFound组件
  2. 在路由表数组的末尾,以*号作为路由path配置路由
    ![
    ](https://img-blog.csdnimg.cn/a6d1a1219aad46ee84aef4ddb0137ed2.png)

page/NotFound

const NotFound = () => {return (<div>this is not found</div>)
}export default NotFound

router/index.js

import Login from '../page/Login/index'
import Article from '../page/Article/index'
import Layout from '../page/Layout'
import About from '../page/About'
import Board from '../page/Board'
import NotFound from '../page/NotFound'import { createBrowserRouter } from 'react-router-dom'const router = createBrowserRouter([{path: '/',element: <Layout/>,children: [{index: true,element: <Board/>},{path: 'About',element: <About/>}]},{path: '/login',element: <Login/>,},{// path: '/article',path: '/article/:id/:name',element: <Article/>},{path: '*',element: <NotFound/>}
])export default router


5. 俩种路由模式

各个主流框架的路由常用的路由模式有俩种,history模式和hash模式, ReactRouter分别由 createBrowerRouter 和 createHashRouter 函数负责创建

路由模式url表现底层原理是否需要后端支持
historyurl/loginhistory对象 + pushState事件需要
hashurl/#/login监听hashChange事件不需要

Code:

history模式

import { createBrowserRouter } from 'react-router-dom'const router = createBrowserRouter([

Res:

Untitled

hash模式

import { createBrowserRouter, createHashRouter } from 'react-router-dom'const router = createHashRouter([

Res:

Untitled



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

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

相关文章

2023年中国高压驱动芯片分类、市场规模及发展趋势分析[图]

高压驱动芯片是一种能在高压环境下工作的集成电路&#xff0c;主要用于控制和驱动各种功率器件&#xff0c;如继电器、电磁阀、电机、变频器等。高压驱动芯片根据其输出电流的大小和形式可分为两类恒流型和开关型。 高压驱动芯片分类 资料来源&#xff1a;共研产业咨询&#x…

蓝桥杯算法双周赛心得——迷宫逃脱(记忆化搜索)

大家好&#xff0c;我是晴天学长&#xff0c;非常经典实用的记忆化搜索题&#xff0c;当然也可以用dp做&#xff0c;我也会发dp的题解&#xff0c;需要的小伙伴可以关注支持一下哦&#xff01;后续会继续更新的。&#x1f4aa;&#x1f4aa;&#x1f4aa; 1) .迷宫逃脱 迷官逃脱…

ubuntu操作系统中docker下Hadoop分布式前置环境配置实验

版本&#xff1a; centos7 hadoop 3.1.3 java JDK:1.8 集群规划&#xff1a; masterslave1slave2HDFS NameNode DataNode DataNode SecondryNameNode DataNode YARNNodeManager ResourceManage NodeManager NodeManager 1.docker容器&#xff1a; 把普通用户加入到docker组&am…

opencv-Canny 边缘检测

Canny边缘检测是一种经典的图像边缘检测算法&#xff0c;它在图像中找到强度梯度的变化&#xff0c;从而识别出图像中的边缘。Canny边缘检测的优点包括高灵敏度和低误检率。 在OpenCV中&#xff0c;cv2.Canny() 函数用于执行Canny边缘检测。 基本语法如下&#xff1a; edges…

代码随想录 134. 加油站

题目 在一条环路上有 n 个加油站&#xff0c;其中第 i 个加油站有汽油 gas[i] 升。 你有一辆油箱容量无限的的汽车&#xff0c;从第 i 个加油站开往第 i1 个加油站需要消耗汽油 cost[i] 升。你从其中的一个加油站出发&#xff0c;开始时油箱为空。 给定两个整数数组 gas 和 cos…

本地训练,开箱可用,Bert-VITS2 V2.0.2版本本地基于现有数据集训练(原神刻晴)

按照固有思维方式&#xff0c;深度学习的训练环节应该在云端&#xff0c;毕竟本地硬件条件有限。但事实上&#xff0c;在语音识别和自然语言处理层面&#xff0c;即使相对较少的数据量也可以训练出高性能的模型&#xff0c;对于预算有限的同学们来说&#xff0c;也没必要花冤枉…

阿里云 ACK 新升级,打造智算时代的现代化应用平台

云布道师 今天&#xff0c;能想到的或是想不到的领域&#xff0c;对容器和 Kubernetes 的需求都居高不减&#xff0c;使这项技术正在真正走向无处不在。 在 2023 云栖大会上&#xff0c;阿里云云原生产品线容器服务负责人易立关于容器服务 ACK 在本届亚运会上应用的介绍&#…

[crash] cxa_pure_virtual 崩溃分析与原理

摘要&#xff1a;工作过程中处理线上的崩溃时发现了一例cxa_pure_virtual相关的crash&#xff0c;直接看堆栈基本山很容易确认是有异步调用导致出发了ABI的异常。但是对于为什么会触发cxa_pure_virtual虽然有大致的猜测但是没有直接的证据&#xff0c;因此本文主要描述触发该类…

C/C++未定义行为的例子汇总

一、什么是未定义行为&#xff1f; 未定义行为&#xff08;Undefined Behavior&#xff09;是指C语言标准未做规定的行为。同时&#xff0c;标准也从没要求编译器判断未定义行为&#xff0c;所以这些行为有编译器自行处理&#xff0c;在不同的编译器可能会产生不同的结果&#…

ElasticSearch之cat aliases API

执行aliases命令&#xff0c;如下&#xff1a; curl -X GET "https://localhost:9200/_cat/aliases?pretty&vtrue" --cacert $ES_HOME/config/certs/http_ca.crt -u "elastic:ohCxPHQBEs5*lo7F9"执行结果输出如下&#xff1a; alias index …

在 VSCode 中使用 GDB 进行 C/C++ 程序调试(图文版)

(꒪ꇴ꒪ )&#xff0c;Hello我是祐言QAQ我的博客主页&#xff1a;C/C语言&#xff0c;数据结构&#xff0c;Linux基础&#xff0c;ARM开发板&#xff0c;网络编程等领域UP&#x1f30d;快上&#x1f698;&#xff0c;一起学习&#xff0c;让我们成为一个强大的攻城狮&#xff0…

webpack loader

1、分类 2、执行顺序 配置类型 执行顺序是 loader1>loader2>loader3 3、使用方式 自己的第一个loader 同步loader /*** loader 就是一个函数* 当webpack 解释资源时&#xff0c; 会调用相应的loader去处理* loader 接收到文件内容作为参数&#xff0c;返回文件内容* p…

Nginx 开源版安装

下载 tar.gz安装包&#xff0c;上传。 解压 [rootlocalhost ~]# tar zxvf nginx-1.21.6.tar.gz nginx-1.21.6/ nginx-1.21.6/auto/ nginx-1.21.6/conf/ nginx-1.21.6/contrib/ nginx-1.21.6/src/ ... ...安装gcc [rootlocalhost nginx-1.21.6]# yum install -y gcc 已加载插件…

ios qt开发要点

目前关于ios qt的开发资料比较少&#xff0c;这里整理了几个比较重要的开发要点&#xff0c;基于MacOS14 Xcode15 Qt15.5 cmake iphone真机。 cmake报错&#xff0c;报错信息如下 CMake Error at /Users/user/Qt/5.15.5/ios/lib/cmake/Qt5Core/Qt5CoreConfig.cmake:91 (m…

C#Wpf关于日志的相关功能扩展

目录 一、日志Sink(接收器) 二、Trace追踪实现日志 三、日志滚动 一、日志Sink(接收器) 安装NuGet包&#xff1a;Serilog Sink有很多种&#xff0c;这里介绍两种&#xff1a; Console接收器&#xff08;安装Serilog.Sinks.Console&#xff09;; File接收器&#xff08;安装…

CSM32RV003:国产高精度16位ADC低功耗RISC-V内核MCU

目录 高精度ADC工业应用工业数据采集应用CSM32RV003简介主要特性 高精度ADC工业应用 高精度ADC即高精度模数转换器&#xff0c;是一种能够将输入模拟信号转换为数字信号的芯片&#xff0c;在多种消费电子、工业、医疗和科研领域都有广泛应用。高精度ADC的主要特点是能够提供高…

深度学习图像修复算法 - opencv python 机器视觉 计算机竞赛

文章目录 0 前言2 什么是图像内容填充修复3 原理分析3.1 第一步&#xff1a;将图像理解为一个概率分布的样本3.2 补全图像 3.3 快速生成假图像3.4 生成对抗网络(Generative Adversarial Net, GAN) 的架构3.5 使用G(z)生成伪图像 4 在Tensorflow上构建DCGANs最后 0 前言 &#…

前端 HTML 的 DOM 事件相关知识有哪些?

HTML 的 DOM 事件是指在网页上发生的各种事件&#xff0c;如点击、鼠标移动、键盘输入等。 通过 JavaScript 脚本可以对这些事件进行监听和处理&#xff0c;以实现交互效果。以下是一些常见的 DOM 事件及其相关知识点&#xff1a; 1、click&#xff1a;点击事件&#xff0c;在…

vue3引入vuex基础

一&#xff1a;前言 使用 vuex 可以方便我们对数据的统一化管理&#xff0c;便于各组件间数据的传递&#xff0c;定义一个全局对象&#xff0c;在多组件之间进行维护更新。因此&#xff0c;vuex 是在项目开发中很重要的一个部分。接下来让我们一起来看看如何使用 vuex 吧&#…

linux文件I/O:文件锁的概念、函数以及代码实现

文件锁是一种用来保证多个进程对同一个文件的安全访问的机制。文件锁可以分为两种类型&#xff1a;建议性锁和强制性锁。建议性锁是一种协作式的锁&#xff0c;它只有在所有参与的进程都遵守锁的规则时才有效。强制性锁是一种强制式的锁&#xff0c;它由内核或文件系统来强制执…