React的路由

1. 什么是前端路由

一个路径 path 对应一个组件 component 当我们在浏览器中访问一个 path 的时候,path 对应的组件会在页面中进行渲染
在这里插入图片描述

2. 创建路由开发环境

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

3. 快速开始

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}/>
)

问题:上面的路由和组件耦合了
解决办法:把路由模块抽象出来

抽象路由模块

在这里插入图片描述

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

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

相关文章

罗宾斯《管理学》第13版/教材讲解/考研真题视频课程/网课

本课程是罗宾斯《管理学》&#xff08;第13版&#xff09;精讲班&#xff0c;为了帮助参加研究生招生考试指定考研参考书目为罗宾斯《管理学》&#xff08;第13版&#xff09;的考生复习专业课&#xff0c;我们根据教材和名校考研真题的命题规律精心讲解教材章节内容。 序号名…

如何使用PHP进行图片处理?

如何使用PHP进行图片处理&#xff1f; 使用PHP进行图片处理是一项强大的功能&#xff0c;它可以让你在服务器端对图像进行各种操作&#xff0c;如裁剪、缩放、添加水印、调整颜色等。这通常通过使用GD库或Imagick扩展来实现。下面将详细介绍如何使用PHP和这两个工具进行图片处…

WinForms 应用程序中使用 SignalR 连接到服务器

安装 dotnet Install Microsoft.AspNetCore.SignalR.ClientWinForms 应用程序中使用 SignalR 连接到服务器时 安装 SignalR 客户端库&#xff1a;使用 NuGet 包管理器安装 SignalR 客户端库。创建 SignalR 连接&#xff1a;在代码中创建 SignalR 连接&#xff0c;并指定服务器…

前端工程化Vue使用Node.js永久设置国内高速npm镜像源

前端工程化Vue使用Node.js永久设置国内高速npm镜像源 接续上篇错误收录&#xff0c;此篇通过简单配置永久设置国内高速npm镜像源方法 1.更换新版镜像 清空npm缓存 npm cache clean --force修改回原版镜像源或直接删除配置过的镜像源 npm config set registry https://registr…

Linux挂载硬盘

1、查看硬盘数量 fdisk -l # 可以看到三个磁盘 # /dev/vda 50G # /dev/vdb 100G 新增 # /dev/vdc 100G 新增2、查看当前挂载情况 df -h # 可以看到50G的已经挂载3、格式化待挂载盘 # 对新的数据盘进行挂载前要进行格式化&#xff0c;只有格式化后才可以挂载 mkfs.ext4 /dev/…

电商技术揭秘三十五:智能风控功能架构浅析

相关系列文章 电商技术揭秘相关系列文章合集&#xff08;1&#xff09; 电商技术揭秘相关系列文章合集&#xff08;2&#xff09; 电商技术揭秘二十八&#xff1a;安全与合规性保障 电商技术揭秘二十九&#xff1a;电商法律合规浅析 电商技术揭秘三十&#xff1a;知识产权保…

【c++】优先级队列与仿函数:C++编程的强大组合

&#x1f525;个人主页&#xff1a;Quitecoder &#x1f525;专栏&#xff1a;c笔记仓 朋友们大家好&#xff0c;本篇文章我们来讲解优先级队列priority_queue 目录 1.priority_queue的介绍和使用函数使用仿函数的使用与介绍greater和less 2.priority_queue的模拟实现基本框架…

网络安全SQL注入

HTML & Vue.js 结合使用 HTML 是网页的基础结构语言&#xff0c;而 Vue.js 是一个用于构建用户界面的渐进式JavaScript框架。结合两者&#xff0c;你可以创建动态、响应式的Web应用程序。Vue.js通过指令&#xff08;如v-bind, v-if, v-for&#xff09;无缝集成到HTML中&am…

统一化数据库:为大语言模型垂域应用奠定基础

编者按&#xff1a;检索增强生成&#xff08;RAG&#xff09;技术因在减少生成幻觉和虚构信息方面的显著效果&#xff0c;以及对知识及时更新能力的改善&#xff0c;正逐渐成为大语言模型系统的主流架构之一。随着 RAG 技术的广泛应用&#xff0c;其核心组件——向量数据库&…

2022 csp-j 答案(精选题)

主题目 16 - 21题 22 - 27题 28 - 34题 35 -39题 40 - 44题 精选题目 答案及解析 28题 答案&#xff1a;T 解析&#xff1a;考查时间复杂度评估。 31题 答案&#xff1a;A 解析&#xff1a;模拟即可。 32题 答案&#xff1a;B 解析&#xff1a;模拟即可。 34题 答…

Android 学习 鸿蒙HarmonyOS 4.0 第一天

1.1系统定位 1.1.1系统定位 HarmonyOS 是一款面向万物互联时代的&#xff0c;全新的分布式操作系统。 在传统的单设备系统能力基础上&#xff0c;HarmonyOS 提出了基于同一套系统能力&#xff0c;适配多种终端形态的分布式理念&#xff0c;能支持手机&#xff0c;平板&#xf…

线上线下包搭建小程序/公众号/H5 支持二开!

网上交友有以下三个积极影响&#xff1a; 1. 扩展社交圈和增加社交机会&#xff1a;网上交友可以让人们接触到不同地区、不同背景、不同文化的人&#xff0c;拓展人们的社交圈并且增加交友机会。这些新的社交联系对于个人的成长和发展有积极的影响&#xff0c;可以让人们学习新…

线阵相机和面阵相机简介

线阵相机 线阵相机&#xff0c;顾名思义就是所探测的物体要在一个很长的界面上。线阵相机的传感器只有一行感光像素&#xff0c;所以线阵相机一般具有非常高的扫描频率和分辨率。 线阵相机特点 线阵相机使用的线扫描传感器通常只有一行感光单元&#xff08;少数彩色线阵使用…

国内各种免费AI聊天机器人(ChatGPT)推荐(上)

作者主页&#xff1a;点击&#xff01; 国内免费AI推荐专栏&#xff1a;点击&#xff01; 创作时间&#xff1a;2024年4月27日11点25分 欢迎来到AI聊天机器人推荐系列的第一篇文章&#xff01; 在这个系列中&#xff0c;我将引领您探索国内各种AI聊天机器人的精彩世界。 从…

k8s-身份认证与权限

认证概述 Kubernetes作为一个分布式集群的管理工具&#xff0c;保证集群的安全性是其一个重要的任务。所谓的安全性其实就是保证对Kubernetes的各种客户端进行认证和鉴权操作。 在Kubernetes集群中&#xff0c;客户端通常有两类&#xff1a; User Account&#xff1a;一般是独…

动态规划:0/1背包问题

01背包问题是一个经典的动态规划问题&#xff0c;它询问在给定的物品和背包容量下&#xff0c;如何选择物品使得背包中的物品总价值最大&#xff0c;同时保证不超过背包的容量限制。物品不能分割&#xff0c;每个物品只能选择放入或不放入背包。 问题定义 输入&#xff1a; 物…

基于FPGA的数字信号处理(4)--浮点数的定点化

写在前面 首先要说明的是&#xff0c;题目《浮点数的定点化》中所谓的 浮点数 并不是指 IEEE754 规定的 单精度浮点数 或者 双精度浮点数 等格式&#xff0c;而是指10进制小数。所以说白了&#xff0c;这篇文章要讲的就是如何将10进制小数采用定点数的形式表示。 为什么2进制无…

Python新手入门基础英文笔记

1、字符串的操作 user&#xff1a;用户 name&#xff1a;名称/姓名 attibute&#xff1a;字段/属性 Value&#xff1a;值 2、重复/转换/替换/原始字符号 upper&#xff1a;上面 lower&#xff1a;下面 capitalize&#xff1a;用大写字母写或印刷 title&#xff1a;标题…

03、第一个 Java 程序运行过程以及运行过程中常见的问题及解决方案

第一个 Java 程序运行 1、新建文本文件并以 .java 结尾&#xff1a;其一、第一个 java 程序的代码为&#xff1a;其二、代码截图为&#xff1a; 2、 .java 文件编译的过程&#xff1a;其一、将 Java 代码编写到扩展名为 .java 的文件中(即&#xff1a;源文件)&#xff1a;其二、…

若依前后端分离版 集成 腾讯云 COS

原因&#xff1a; 最近在根据一个若依二开的项目继续进行开发&#xff0c;当添加到轮播图模块的时候&#xff0c;涉及到了图片上传&#xff0c;由于公司以前一直使用的是腾讯云COS&#xff08;不是阿里云OSS&#xff09;&#xff0c;在网上搜索一番后&#xff0c;没有找到 若依…