【React】路由的基础使用

react-router-dom@6的基础使用

动态路由

1、安装依赖
npm i react-router-dom

默认安装最新版本的

2、在src/router/index.js
import { createBrowserRouter } from "react-router-dom"/* createBrowserRouter:[/home]--h5路由createHashRouter:[/#/home]--哈希路由*/const router=createBrowserRouter([{path:"/login",element:<div>登录页</div>},{path:"/",element:<div>首页</div>},{path:"/mine",element:<div>我的</div>},{path:"*",element:<div>404</div>}
])// element里可以替换成自己写的组件export default router
3、在src/index.js
import React from 'react';
import ReactDOM from 'react-dom/client';import { RouterProvider } from "react-router-dom"import router from "./router/index.js"const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<RouterProvider router={router} />
);

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

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

相关文章

Linux访问NFS存储及自动挂载

本章主要介绍NFS客户端的使用 创建NFS服务器并通过NFS共享一个目录在客户端上访问NFS共享的目录自动挂载的配置和使用 1.1 访问NFS存储 前面那篇介绍了本地存储&#xff0c;本章就来介绍如何使用网络上上的存储设备。NFS即网络文件系统&#xff0c;所实现的是Linux和Linux之…

通信:mqtt学习网址

看这个网址&#xff1a;讲的很详细&#xff0c;后面补实战例子 第一章 - MQTT介绍 MQTT协议中文版 (gitbooks.io)https://mcxiaoke.gitbooks.io/mqtt-cn/content/mqtt/01-Introduction.html

【网络编程】-- 04 UDP

网络编程 6 UDP 6.1 初识Tomcat 服务端 自定义 STomcat S 客户端 自定义 C浏览器 B 6.2 UDP 6.2.1 udp实现发送消息 接收端&#xff1a; package com.duo.lesson03;import java.net.DatagramPacket; import java.net.DatagramSocket; import java.net.SocketExceptio…

【论文极速读】LVM,视觉大模型的GPT时刻?

【论文极速读】LVM&#xff0c;视觉大模型的GPT时刻&#xff1f; FesianXu 20231210 at Baidu Search Team 前言 这一周&#xff0c;LVM在arxiv上刚挂出不久&#xff0c;就被众多自媒体宣传为『视觉大模型的GPT时刻』&#xff0c;笔者抱着强烈的好奇心&#xff0c;在繁忙工作之…

m.2固态硬盘怎么选择?

一、什么是固态硬盘 固态硬盘又称SSD&#xff0c;是Solid State Drive的简称&#xff0c;由于采用了闪存技术&#xff0c;其处理速度远远超过传统的机械硬盘&#xff0c;这主要是因为固态硬盘的数据以电子的方式存储在闪存芯片中&#xff0c;不需要像机械硬盘那样通过磁头读写磁…

linux查看笔记本电池健康情况

本人的老电脑&#xff0c;笔记本x1 carbon 5th 用久了&#xff0c;电池不行了&#xff0c;实际容量只有27.657%&#xff0c;充电到40%的时候&#xff0c;一瞬间彪满100%。到某宝淘了一个 model: 01AV430的电池,等更换了再看看使用情况 $ upower --help 用法&#xff1a;upower…

Linux 安装 中间件 Tuxedo

安装步聚 一、首先&#xff0c;下载中间件安装包&#xff1a; tuxedo121300_64_Linux_01_x86 Tuxedo下载地址&#xff1a; Oracle Tuxedo Downloads 二、新建Oracle用户组&#xff08;创建Oracle用户时&#xff0c;需要root权限操作&#xff0c;登陆&#xff09; [rootloca…

【CiteSpace】引文可视化分析软件CiteSpace下载与安装

CiteSpace 译“引文空间”&#xff0c;是一款着眼于分析科学分析中蕴含的潜在知识&#xff0c;是在科学计量学、数据可视化背景下逐渐发展起来的引文可视化分析软件。由于是通过可视化的手段来呈现科学知识的结构、规律和分布情况&#xff0c;因此也将通过此类方法分析得到的可…

【Spring教程23】Spring框架实战:从零开始学习SpringMVC 之 SpringMVC简介与SpringMVC概述

目录 1&#xff0c;SpringMVC简介2、SpringMVC概述 欢迎大家回到《Java教程之Spring30天快速入门》&#xff0c;本教程所有示例均基于Maven实现&#xff0c;如果您对Maven还很陌生&#xff0c;请移步本人的博文《如何在windows11下安装Maven并配置以及 IDEA配置Maven环境》&…

python使用vtk与mayavi三维可视化绘图

VTK&#xff08;Visualization Toolkit&#xff09;是3D计算机图形学、图像处理和可视化的强大工具。它可以通过Python绑定使用&#xff0c;适合于科学数据的复杂可视化。Mayavi 依赖于 VTK (Visualization Toolkit)&#xff0c;一个用于 3D 计算机图形、图像处理和可视化的强大…

AS安装目录

编辑器&#xff1a; sdk: gradle: gradle使用的jdk目录&#xff1a;Gradle使用的jdk是android studio安装目录下的jbr 成功项目的android studio配置&#xff1a;

H264码流结构

视频编码的码流结构是指视频经过编码之后得到的二进制数据是怎么组织的&#xff0c;或者说&#xff0c;就是编码后的码流我们怎么将一帧帧编码后的图像数据分离出来&#xff0c;以及在二进制码流数据中&#xff0c;哪一块数据是一帧图像&#xff0c;哪一块数据是另外一帧图像。…

C++面试宝典第4题:合并链表

题目 有一个链表&#xff0c;其节点声明如下&#xff1a; struct TNode {int nData;struct TNode *pNext;TNode(int x) : nData(x), pNext(NULL) {} }; 现给定两个按升序排列的单链表pA和pB&#xff0c;请编写一个函数&#xff0c;实现这两个单链表的合并。合并后&#xff0c;…

scheduleatfixedrate详解

scheduleatfixedrate详解 大家好&#xff0c;我是免费搭建查券返利机器人赚佣金就用微赚淘客系统3.0的小编&#xff0c;也是冬天不穿秋裤&#xff0c;天冷也要风度的程序猿&#xff01;在Java开发中&#xff0c;我们常常需要执行定时任务&#xff0c;并且需要保证任务按照一定…

使用Java实现基数排序算法

文章目录 基数排序算法 基数排序算法 &#xff08;1&#xff09;基本思想&#xff1a;将整数按位数切割成不同的数字&#xff0c;然后按每个位数分别比较。 &#xff08;2&#xff09;排序过程&#xff1a;将所有待比较数值&#xff08;正整数&#xff09;统一为同样的数位长…

Vuex快速上手

一、Vuex 概述 目标&#xff1a;明确Vuex是什么&#xff0c;应用场景以及优势 1.是什么 Vuex 是一个 Vue 的 状态管理工具&#xff0c;状态就是数据。 大白话&#xff1a;Vuex 是一个插件&#xff0c;可以帮我们管理 Vue 通用的数据 (多组件共享的数据)。例如&#xff1a;购…

VSCode SSH登录服务器 提示XHR failed

设置->搜索“代理” 把图中的√去掉 重启 即可

OVS主线流程

OVS是open virtual switch的简称&#xff0c;是现在广泛使用的软件实现的虚拟网络交换机。 各大云厂商普遍使用OVS来实现自身的虚拟网络&#xff0c;各厂商会根据自身需要加以修改使之符合自身需求&#xff0c;DPU中也使用OVS来实现流表的offload。OVS中的流表基于多级结构&am…

变相增大BatchSize——梯度累积

常规训练方式 for x,y in train_loader:pred model(x)loss criterion(pred, label)# 反向传播loss.backward()# 根据新的梯度更新网络参数optimizer.step()# 清空以往梯度&#xff0c;通过下面反向传播重新计算梯度optimizer.zero_grad() pytorch每次forward完都会得到一个…

tidb安装 centos7单机集群

安装 [rootlocalhost ~]# curl --proto https --tlsv1.2 -sSf https://tiup-mirrors.pingcap.com/install.sh | sh [rootlocalhost ~]# source .bash_profile [rootlocalhost ~]# which tiup [rootlocalhost ~]# tiup playground v6.1.0 --db 2 --pd 3 --kv 3 --host 192.168.1…