react 路由v6

这里是区别:V5 vs V6
这里是官网:可以查看更多高级属性

一、基本使用:

1、配置文件

src/routes/index


import React from "react";const Home = React.lazy(() => import("../Pages/Home"));
const About = React.lazy(() => import("../Pages/About"));const routes = [{path: "/home",name: "home",element: <Home></Home>,},{path: "/about",name: "about",element: <About></About>,},
];export default routes
2. 使用路由方式1

src / App.js
useRoutes可以代替标签完成:

  • 注册路由,完成路由和组件的匹配
  • 自动根据当前路径匹配一个组件
  • 给当前路由组件指定展示位置,就是elements所处的位置
import { useRoutes } from "react-router";
import routes from "./routes";function App() {const elements = useRoutes(routes);return (<div className="App"><h3>{导航区...} </h3>{elements}</div>);
}export default App;

src / main.js
注意:

<BrowserRouter>必须存在,包裹最外层奥

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<BrowserRouter><App /></BrowserRouter>
);
3、使用路由表的方式2

在这里插入图片描述

二、一些比较诡异的东西

1. outlet

概述:用于父路由组件中,作用给子路由组件站位用的。

本来v5中不是用的 Router等可以在不同的地方注册和占位吗?。现在 更推荐 函数式和 对象了 详见上文1.2. 使用路由方式1 。 那么此时只能站位一次了。更深层次的路由组件往哪里展示呢?就用到了 outlet。

参考:outlet

2. index:true

概述:就是说 我的父级路由 并不真实的对应一个组件,但是此时若用户自己手动改到这个父级的路由,应该展示的内容,就是后边的element

官网链接
在这里插入图片描述

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

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

相关文章

Spring之国际化:i18n

学习的最大理由是想摆脱平庸&#xff0c;早一天就多一份人生的精彩&#xff1b;迟一天就多一天平庸的困扰。各位小伙伴&#xff0c;如果您&#xff1a; 想系统/深入学习某技术知识点… 一个人摸索学习很难坚持&#xff0c;想组团高效学习… 想写博客但无从下手&#xff0c;急需…

【强化学习】PPO:近端策略优化算法

近端策略优化算法 《Proximal Policy Optimization Algorithms》 论文地址&#xff1a;https://arxiv.org/pdf/1707.06347.pdf 一、 置信域方法(Trust Region Methods) ​ 设 π θ o l d \pi_{\theta_{old}} πθold​​是先前参数为 θ o l d \theta_{old} θold​的策略网…

Java@RequestParam注解和@RequestBody注解接收参数

目录 Java后端接收数据 第一章、后端不写任何注解情况下接收参数1.1&#xff09;后端不写注解postman发出get请求1.2&#xff09;后端不写注解postman发出post请求 第二章、后端写RequestParam注解接收参数2.1&#xff09;postman发出post请求2.2&#xff09;postman发出get请求…

docker-compose 安装Sonar并集成gitlab

文章目录 1. 前置条件2. 编写docker-compose-sonar.yml文件3. 集成 gitlab4. Sonar Login with GitLab 1. 前置条件 安装docker-compose 安装docker 创建容器运行的特有网络 创建挂载目录 2. 编写docker-compose-sonar.yml文件 version: "3" services:sonar-postgre…

【计算机网络】网络层——IP协议

目录 一. 基本概念 二. 协议报文格式 三. 网段划分 1. 第一次划分 2. CIDR方案 3. 特殊的IP地址 四. IP地址不足 1. 私有IP和公网IP 2. DHCP协议 3. 路由器 4. NAT技术 内网穿透(NAT穿透) 五. 路由转发 路由表生成算法 结束语 一. 基本概念 IP指网络互连协议…

android内存管理机制概览

关于作者&#xff1a;CSDN内容合伙人、技术专家&#xff0c; 从零开始做日活千万级APP。 专注于分享各领域原创系列文章 &#xff0c;擅长java后端、移动开发、人工智能等&#xff0c;希望大家多多支持。 目录 一、导读二、概览三、相关概念3.1 垃圾回收3.2 应用内存的分配与回…

Linux与Bash 编程——Linux文件处理命令-L1

目录&#xff1a; linux系统与shell环境准备 Linux系统简介操作系统简史Linux的发行版&#xff1a;Linux与Windows比较&#xff1a;Linux安装安装包下载Linux的访问方式远程登录方式远程登录软件&#xff1a;mobaxterm的使用&#xff1a;使用电脑命令行连接&#xff1a;sshd的…

一篇讲透:箭头函数、普通函数有什么区别

前言 &#x1f4eb; 大家好&#xff0c;我是南木元元&#xff0c;热衷分享有趣实用的文章&#xff0c;希望大家多多支持&#xff0c;一起进步&#xff01; &#x1f345; 个人主页&#xff1a;南木元元 目录 什么是箭头函数 箭头函数和普通函数的区别 更简洁的语法 箭头函数…

10-让Java性能提升的JIT深度剖析

文章目录 JVM的语言无关性解释执行与JITC1、C2与Graal编译器C1编译器C2编译器 分层编译(了解即可)热点代码热点探测方法调用计数器回边计数器 编译优化技术方法内联锁消除标量替换逃逸分析技术逃逸分析的原理逃逸分析 JVM的语言无关性 跨语言&#xff08;语言无关性&#xff0…

OpenHarmony之内核层解析~

OpenHarmony简介 技术架构 OpenHarmony整体遵从分层设计&#xff0c;从下向上依次为&#xff1a;内核层、系统服务层、框架层和应用层。系统功能按照“系统 > 子系统 > 组件”逐级展开&#xff0c;在多设备部署场景下&#xff0c;支持根据实际需求裁剪某些非必要的组件…

平衡二叉树的构建(递归

目录 1.概念&#xff1a;2.特点&#xff1a;3.构建方法&#xff1a;4.代码&#xff1a;小结&#xff1a; 1.概念&#xff1a; 平衡二叉树&#xff08;Balanced Binary Tree&#xff09;&#xff0c;也称为AVL树&#xff0c;是一种二叉树&#xff0c;它满足每个节点的左子树和右…

BDD - Python Behave Runner Script

BDD - Python Behave Runner Script 引言Runner Scriptsubprocess.run 调用 Behave 命令行调用 Behave 提供的 API behave_main 引言 通过终端命令执行 Behave 测试用例&#xff0c;有时 IDE 重启了&#xff0c;还得重新敲一遍命令&#xff0c;很是麻烦&#xff0c;说实话我都…

单例模式(C++实现)

RAII运用 只能在栈上创建对象 只能在堆上创建的对象 单例模式 设计模式 懒汉模式 解决线程安全 优化 饿汉模式 饿汉和懒汉的区别 线程安全与STL与其他锁

Hadoop入门学习笔记——四、MapReduce的框架配置和YARN的部署

视频课程地址&#xff1a;https://www.bilibili.com/video/BV1WY4y197g7 课程资料链接&#xff1a;https://pan.baidu.com/s/15KpnWeKpvExpKmOC8xjmtQ?pwd5ay8 Hadoop入门学习笔记&#xff08;汇总&#xff09; 目录 四、MapReduce的框架配置和YARN的部署4.1. 配置MapReduce…

微擎模块 出现Error: template source ‘common/message’ is not exist!解决方法

今天有会员反馈微课堂分销中心打不开&#xff0c;错误提示模板找不到&#xff1a;Error: template source ‘common/message’ is not exist!&#xff0c;看了下这模板应该微擎框架通用的&#xff0c;进公众号会员管理-会员中心网址居然也打不开&#xff0c;提示一样的错误&…

【hacker送书第11期】Python数据分析从入门到精通

探索数据世界&#xff0c;揭示未来趋势 《Python数据分析从入门到精通》是你掌握Python数据分析的理想选择。本书深入讲解核心工具如pandas、matplotlib和numpy&#xff0c;助您轻松处理和理解复杂数据。 通过matplotlib、seaborn和创新的pyecharts&#xff0c;本书呈现生动直…

5g消息-5G时代短信升级-富媒体智能交互-互联网新入口

在5G时代&#xff0c;运营商和各大手机厂商都在积极推进5G消息的商用&#xff0c;基于短信入口的富媒体消息应用在近两年得到快速发展&#xff0c;并在企业端形成了广泛应用。 作为5G时代的数字原生应用&#xff0c;5G消息支持用户通过文字、图片、音频、视频、位置等富媒体方式…

GIT具体配置步骤详解

GIT配置具体步骤如下 SDK 使用 Repo 工具管理&#xff0c;拉取 SDK 需要配置安装 Repo 工具。 Repo is a tool built on top of Git. Repo helps manage many Git repositories, does the uploads to revision control systems, and automates parts of the development workf…

SpringBoot集成opencc4j实现繁体中文转为简体中文

背景 繁体中文转为简体中文的需求非常常见&#xff0c;特别是在中文语境下的文本处理和翻译应用中。有很多现成的工具和库可以实现这个功能&#xff0c;比如 OpenCC 、 HanLP 等。从网上下载的 MySQL 版诗词数据库中的诗词数据都是繁体字&#xff0c;这里使用 SpringBoot 集成…

Apache Flink 进阶教程(七):网络流控及反压剖析

目录 前言 网络流控的概念与背景 为什么需要网络流控 网络流控的实现&#xff1a;静态限速 网络流控的实现&#xff1a;动态反馈/自动反压 案例一&#xff1a;Storm 反压实现 案例二&#xff1a;Spark Streaming 反压实现 疑问&#xff1a;为什么 Flink&#xff08;bef…