【React-Router】路由快速上手

1. 创建路由开发环境

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

2. 快速开始

// index.jsimport React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { createBrowserRouter, RouterProvider } from 'react-router-dom';const router = createBrowserRouter([{path: '/login',element: <div>登录</div>},{path: '/article',element: <div>文章</div>}
])
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<React.StrictMode><RouterProvider router={router} /></React.StrictMode>
);// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

3. 抽象路由模块

image.png

image.png

// @/page/Article/index.js
const Article = () => {return <div>文章页</div>
}export default Article
// @/router/index.js
import Login from '../page/Login'
import Article from '../page/Article'
import { createBrowserRouter } from 'react-router-dom'
const router = createBrowserRouter([{path: '/login',element: <Login></Login>},{path: '/article',element: <Article></Article>},{path: '/',element: <Login></Login>}
])export default router
// @/index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import {  RouterProvider } from 'react-router-dom';
// 导入路由
import router from './router';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<React.StrictMode>{/* 路由绑定 */}<RouterProvider router={router} /></React.StrictMode>
);// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

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

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

相关文章

Ubuntu18 Opencv3.4.12 viz 3D显示安装、编译、移植

Opencv3.*主模块默认包括两个3D库 calib3d用于相机校准和三维重建 &#xff0c;viz用于三维图像显示&#xff0c;其中viz是cmake选配。 参考&#xff1a; https://docs.opencv.org/3.4.12/index.html 下载linux版本的源码 sources。 查看cmake apt list --installed | grep…

设计模式—命令模式

1.什么是命令模式&#xff1f; 命令模式是一种行为型设计模式&#xff0c;核心是将每种请求或操作封装为一个独立的对象&#xff0c;从而可以集中管理这些请求或操作&#xff0c;比如将请求队列化依次执行、或者对操作进行记录和撤销。 命令模式通过将请求的发送者&#xff0…

学习MySQL先有全局观,细说其发展历程及特点

学习MySQL先有全局观&#xff0c;细说其发展历程及特点 一、枝繁叶茂的MySQL家族1. 发展历程2. 分支版本 二、特点分析1. 常用数据库2. 选型角度及场景 三、三大组成部分四、总结 相信很多同学在接触编程之初&#xff0c;就接触过数据库&#xff0c;而对于其中关系型数据库中的…

结合两个Python小游戏,带你复习while循环、if判断、函数等知识点

&#x1f490;作者&#xff1a;insist-- &#x1f490;个人主页&#xff1a;insist-- 的个人主页 理想主义的花&#xff0c;最终会盛开在浪漫主义的土壤里&#xff0c;我们的热情永远不会熄灭&#xff0c;在现实平凡中&#xff0c;我们终将上岸&#xff0c;阳光万里 ❤️欢迎点…

ECharts 实例2

之前做过一个 ECharts 例子&#xff1b;再做一个看一下&#xff1b; <!DOCTYPE html> <html> <head><meta charset"gb2312"><title> 多bar 实例</title><!-- 引入 echarts.js --><script src"https://cdn.static…

VMware三种网络模式

桥接模式 NAT(网络地址转换模式) Host-Only(仅主机模式) 参考&#xff1a; vmware虚拟机三种网络模式 - 知乎 (zhihu.com)

【大数据Hive】hive 优化策略之job任务优化

目录 一、前言 二、hive执行计划 2.1 hive explain简介 2.1.1 语法格式 2.1.2 查询计划阶段说明 2.2 操作演示 2.2.1 不加条件的查询计划分析 2.2.2 带条件的查询计划分析 三、MapReduce属性优化 3.1 本地模式 3.1.1 本地模式参数设置 3.1.2 本地模式操作演示 3.2 …

Elasticsearch 和 LangChain 合作开发可用于生产的 RAG 模板

作者&#xff1a;Aditya Tripathi 在过去的几个月里&#xff0c;我们一直与 LangChain 团队密切合作&#xff0c;他们在推出 LangServe 和 LangChain 模板方面取得了进展&#xff01; LangChain Templates 是一组用于构建生产质量的生成式 AI 应用程序的参考架构。 你可以在此处…

Flutter笔记:Matrix4矩阵变换与案例

Flutter笔记 Matrix4矩阵变换及其案例 作者&#xff1a;李俊才 &#xff08;jcLee95&#xff09;&#xff1a;https://blog.csdn.net/qq_28550263 邮箱 &#xff1a;291148484163.com 本文地址&#xff1a;https://blog.csdn.net/qq_28550263/article/details/134474764 【简介…

强化学习--多维动作状态空间的设计

目录 一、离散动作二、连续动作1、例子12、知乎给出的示例2、github里面的代码 免责声明&#xff1a;以下代码部分来自网络&#xff0c;部分来自ChatGPT&#xff0c;部分来自个人的理解。如有其他观点&#xff0c;欢迎讨论&#xff01; 一、离散动作 注意&#xff1a;本文均以…

【Docker】Docker安装Nginx配置静态资源

1.下载镜像 2.创建nginx配置文件 3.创建nginx容器运行 4.配置nginx静态资源 1.下载镜像 Dockerhub官网&#xff1a;Docker docker pull nginx docker pull nginx下载最新版本 默认latest 下载指定版本docker pull nginx:xxx 2.创建nginx配置文件 启动容器之前要创建nginx…

【云原生】初识 Service Mesh

目录 一、什么是Service Mesh 二、微服务发展历程 2.1 微服务架构演进历史 2.1.1 单体架构 2.1.2 SOA阶段 2.1.3 微服务阶段 2.2 微服务治理中的问题 2.2.1 技术栈庞杂 2.2.2 版本升级碎片化 2.2.3 侵入性强 2.2.4 中间件多&#xff0c;学习成本高 2.2.5 服务治理功…

智能座舱架构与芯片- (8) 视觉篇

一、概述 相比起用于ADAS感知系统的摄像头&#xff0c;用于智能座舱内部的摄像头&#xff0c;其功能特性和性能要求相对简单。例如&#xff0c;OMS乘客监控摄像头&#xff0c;一般达到5MP即可有良好的效果。同时&#xff0c;OMS也可应用于车内会议系统&#xff0c;还应用于车内…

selenium判断元素是否存在的方法

文章目录 快捷方法完整示例程序 快捷方法 selenium没有exist_xxx相关的方法&#xff0c;无法直接判断元素存在。但是锁定元素时使用的browser.find_elements(By.CSS_SELECTOR, "css元素")会返回一个列表list&#xff0c;如果不存在这个元素就会返回一个空列表。因此…

【办公常识】写好的代码如何上传?使用svn commit

首先找到对应的目录 找到文件之后点击SVN Commit

ModernCSS.dev - 来自微软前端工程师的 CSS 高级教程,讲解如何用新的 CSS 语法来解决旧的问题

今天给大家安利一套现代 CSS 的教程&#xff0c;以前写网页的问题&#xff0c;现在都可以用新的写法来解决了。 ModernCSS.dev 是一个现代 CSS 语法的教程&#xff0c;讲解新的 CSS 语法如何解决一些传统问题&#xff0c;一共有30多课。 这套教程的作者是 Stephanie Eckles&am…

git clone慢的解决办法

在网站 https://www.ipaddress.com/ 分别搜索&#xff1a; github.global.ssl.fastly.net github.com 得到ip&#xff1a; 打开hosts文件 sudo vim /etc/hosts 在hosts文件末尾添加 140.82.114.3 github.com 151.101.1.194 github.global-ssl.fastly.net 151.101.65.194 g…

汇编-间接寻址(处理数组)

直接寻址很少用于数组处理&#xff0c;因为用常数偏移量来寻址多个数组元素时&#xff0c;直接寻址并不实用。取而代之的是使用寄存器作为指针(称为间接寻址(indirect addressing) ) 并控制该寄存器的值。如果一个操作数使用的是间接寻址&#xff0c; 就称之为间接操作数(indie…

minio安装使用-linux

下载地址&#xff1a;MinIO | Code and downloads to create high performance object storage 选择 minio server 可以直接下载二进制文件。 将下载的文件传输到服务器的指定文件夹下&#xff0c;如 /opt/minio。 然后在&#xff0c;命令行启动minio&#xff1a; /opt/mini…

网工内推 | 合资公司网工,CCNP/HCIP认证优先,朝九晚六

01 中企网络通信技术有限公司 招聘岗位&#xff1a;网络工程师 职责描述&#xff1a; 1、按照工作流程和指引监控网络运行情况和客户连接状况&#xff1b; 2、确保各监控系统能正常运作&#xff1b; 3、快速响应各个网络告警事件&#xff1b; 4、判断出网络故障&#xff0c;按…