两种路由模式(React-Router 8)

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

附带代码:

import Login from "../page/Login";
import Article from "../page/Article";
import Layout from "../page/Layout";
import Board from "../page/Board";
import About from "../page/About";
import NotFound from "../page/NotFount";
import { createBrowserRouter, createHashRouter } from "react-router-dom";const router = createBrowserRouter([{path: "/",element: <Layout></Layout>,children: [// 设置为默认二级路由 一级路由访问的时候,它也能得到渲染{index: true,element: <Board></Board>,},{path: "about",element: <About></About>,},],},{path: "/login",element: <Login></Login>,},{// searchParams 传参// path: "/article",// params 传参path: "/article/:id/:name",element: <Article></Article>,},{path: "*",element: <NotFound></NotFound>,},
]);export default router;

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

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

相关文章

【01】OpenCV C++实战篇——基于多项式插值的亚像素边缘定位算法

文章目录一. 背景二. 你的经历三. 代码实现(龟速版——单线程)3.1 梯度幅值3.1.1 生成 8 个方向模板3.1.2 计算梯度3.1.3 显示梯度图像3.1.4 程序运行演示3.2 梯度方向 &#xff08;梯度最大幅度值和方向&#xff09;3.3 单像素边缘3.4 梯度单像素边缘提取 运行测试四 、亚像素…

400V降24V,200mA,应用领域:从生活到工业的 “全能电源管家”WD5208

WD5208 电源芯片&#xff1a;小身材蕴藏大能量的电源控制新星在电源芯片的技术星河中&#xff0c;WD5208 凭借独特性能与广泛适用性崭露头角&#xff0c;成为众多电子设备电源方案的优选。本文将全面解析这款芯片的核心优势、应用场景与技术细节&#xff0c;展现其 “小身材&am…

C++ 引用 和 指针 的区别

特性引用指针初始化不能为 null&#xff0c;必须绑定到有效的对象可以为 null&#xff0c;不指向任何对象重新绑定不能重新绑定&#xff0c;一旦初始化后始终引用同一个对象可以重新指向其他对象内存占用不占用额外内存&#xff0c;编译器通常将其优化为所引用的对象占用额外内…

Claude Code实战体验:AI智能编程助手如何重塑开发工作流?

一、背景介绍 AI大模型的爆发&#xff0c;让各种智能编码工具如雨后春笋般涌现。Claude Code就是其中非常有代表性的一款——它不仅能补全代码、查找Bug&#xff0c;还能理解复杂需求&#xff0c;甚至帮你写文档、生成测试用例。作为一名全栈开发者&#xff0c;我和团队最近几个…

centos7 个人网站搭建之gitlab私有化部署实现线上发布

文章目录 效果展示架构设计申请免费阿里云服务器尝试连接远程服务 开放端口申请域名 绑定云服务器组网网关服务器配置转发代理网关服务器配置ssl 证书问题排查证书申请时报错&#xff1a;Set the \server_name\ directive ti use the Nginx installer. gitlab私有化部署搭建git…

小米4A千兆版路由器刷机,解决Telnet无法连接问题

刷机极容易变砖&#xff0c;建议完全理清步骤后再进行操作 工具准备 1、小米4A千兆版路由器&#xff08;注意一定是千兆版&#xff0c;只是4A无千兆按下列步骤会变砖&#xff09;&#xff0c;适配电源线 2、网线一根 3、需保证刷机过程中网线接入是有网的&#xff0c;无需账号认…

计算机网络:如何将一个B类IP地址分为4个子网

要将一个B类IP地址划分为4个子网&#xff0c;需通过子网掩码扩展&#xff08;即借位&#xff09;来实现。以下是详细步骤和原理&#xff1a; 一、B类IP地址的基础特性 默认网络位&#xff1a;B类地址前16位为网络位&#xff08;标识网络&#xff09;&#xff0c;后16位为主机位…

K8S 性能瓶颈排查

K8S 性能瓶颈排查 随着业务量增长,Kubernetes 集群经常出现: • Pod 启动慢? • API 响应慢? • 节点 CPU 飙高? • 服务无故中断? 这可能是性能瓶颈在悄悄作祟。 性能瓶颈全局视角 # K8S 性能瓶颈排查思维导图- 集群层面- API Server 响应慢- Etcd 压力大- 控制面组件…

实习005 (web后端springboot)

五种创建方式一、方法一&#xff08;直接创建&#xff09;二、方法二&#xff08;阿里云&#xff09;三、方法三&#xff08;从官网&#xff09;或者说四、方法四、&#xff08;案例云官网&#xff09;五、方法五、&#xff08;自己写&#xff09;先构建javaweb项目刷新后还是出…

基于vscode连接服务器实现远程开发

目录 一、背景介绍 1.1 什么是远程开发 1.2 版本清单 二、以Java项目开发为例 2.1 安装远程开发插件 2.2 安装语言开发插件 2.3 新建ssh连接 2.4 打开服务器目录 一、背景介绍 1.1 什么是远程开发 远程开发是基于服务器环境进行实现本地开发操作&#xff0c;…

Java与Kotlin中“==“、“====“区别

一、Kotlin 中的区别&#xff08;双等于&#xff09; - 结构相等性检查比较两个对象的内容是否相等&#xff08;相当于调用 equals() 方法&#xff09;。自动处理 null 安全&#xff1a;a b 等价于 a?.equals(b) ?: (b null)。示例&#xff1a;val s1 "Hello" v…

接口自动化测试框架-AIM

3天精通Postman接口测试&#xff0c;全套项目实战教程&#xff01;&#xff01;最近在做公司项目的自动化接口测试&#xff0c;在现有几个小框架的基础上&#xff0c;反复研究和实践&#xff0c;搭建了新的测试框架。利用业余时间&#xff0c;把框架总结了下来。 AIM框架介绍 …

Orange的运维学习日记--28.Linux逻辑卷详解

Orange的运维学习日记–28.Linux逻辑卷详解 文章目录Orange的运维学习日记--28.Linux逻辑卷详解为什么使用 LVM基本概念创建物理卷创建卷组创建逻辑卷创建文件系统并挂载清理 LVM 对象扩展与缩减逻辑卷扩展 LV缩减 LV调整文件系统大小扩展 XFS 文件系统扩展 EXT4 文件系统缩减 …

AI大模型学习三十三、HeyGem.ai 服务端(ubuntu)docker 安装 /客户端(win)分离部署

一、说明服务端安装官方安装客户端在windows 上安装解决分离问题利用samba实现共享&#xff0c;我是在局域网访问&#xff0c;安装道理可以在非局域网访问重新弄了一块显卡&#xff0c;所以驱动也重新装下二、环境准备(base) mucunax58:~$ lsb_release -a No LSB modules are …

AI在安全方面的十个应用场景

人工智能&#xff08;AI&#xff09;正在重塑安全领域的“游戏规则”&#xff0c;把“被动防御”变成“主动狩猎”。综合当前主流实践与最新案例&#xff0c;可将其应用归纳为以下十大场景&#xff1a;威胁检测与狩猎利用机器学习/深度学习模型对网络流量、终端行为和云端日志进…

Android --- Bug调查经验记录

文章目录1.布局中Pag不显示的问题2.数据库降级问题3.RecycleView 列表滑动卡顿1.布局中Pag不显示的问题 在调查一个pag不显示的问题&#xff0c;整体逻辑没有问题&#xff0c;但是就是不显示 pag不显示的根本原因大概有文件找不到&#xff0c;一个是路径问题&#xff0c;一个是…

【C语言】深度剖析指针(三):回调机制、通用排序与数组指针逻辑

文章目录一、回调函数&#xff1a;通过函数指针实现灵活调用1.1 什么是回调函数&#xff1f;1.2 回调函数的实际应用&#xff1a;简化计算器代码二、qsort函数2.1 qsort函数的参数说明2.2 使用qsort排序整型数据2.3 使用qsort排序结构体数据示例&#xff1a;学生信息排序2.4 qs…

sql调优总结

sql调优 线上发现部分sql查询时间过长。使用explain观察是否命中表的索引。未命中索引&#xff0c;使用 TABLE add index 语句添加索引。 除此之外&#xff0c;单个字段命中联合索引的情况也会导致查询变慢 针对多个字段的查询可添加联合索引。 总结如下慢sql的原因&#xff1a…

如何在nuxt项目中使用axios进行网络请求?

在 Nuxt 项目中使用 Axios 进行网络请求有两种常用方式&#xff1a;一是直接安装 Axios 并全局配置&#xff0c;二是使用 Nuxt 官方推荐的 nuxtjs/axios 模块&#xff08;更便捷&#xff09;。以下是详细步骤&#xff1a; 方法一&#xff1a;使用官方推荐的 nuxtjs/axios 模块&…

Unity 实现手机端和电脑项目在局域网内通信

电脑端启动后自动广播自身存在&#xff0c;手机端启动后监听广播并发现服务器。发现后自动建立 UDP 连接&#xff0c;双方可互发消息。内置心跳检测&#xff0c;网络中断时会自动检测并提示断开using UnityEngine; using System.Net; using System.Net.Sockets; using System.T…