react js 路由 Router

news2024/12/24 8:53:01

完整的项目,我已经上传了 资料链接

起因, 目的:

路由, 这部分很难。 原因是, 多个组件,进行交互,复杂度比较高。

我看的视频教程

1. 初步使用
  1. 安装:

    npm install react-router-dom

  2. 修改 index.js/ 或是 main.js
    把 App, 用 BrowserRouter 包裹起来

2. Navigate

点击按钮,会退出退出登录,然后回到首页。
在这里插入图片描述

import {
    useState } from "react";
import {
    Navigate } from "react-router-dom";

// 使用 Navigate, 跳转页面。
// Navigate 本身也是一个组件。 
function About() {
   
  const [username, setUsername] = useState("mario");

  // 如果用户名无效,或是用户没有登录。 那么把页面跳转到 Home!
  // replace={true}, 跳转后,回不去了。
  if(!username) {
   
    return <Navigate to

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

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

相关文章

JAVA基础: while循环,for循环,break和continue关键字,数组详解

1 while循环 while(boolean结果)语句/语句组 每次循环做什么事 循环条件 循环条件改变。 循环嵌套 在一个循环中&#xff0c;出现了另一个循环。 无限循环 循环条件永远为真。 int i 10 ; while(i > 0){//....i ; }------------------------- while(true){}2 break关键…

mysql的整理

插入数据&#xff1a; INSERT INTO 表名 (字段名1, 字段名2, ...) VALUES (值1, 值2, ...); insert into employee(id,workno,name,gender,age,idcard,entrydate) values(1,1,Itcast,男,-1,123456789012345678,2000-01-01); insert into employee values(3,3,韦一笑,男,38,1…

如何利用 CSS 渐变实现多样化背景效果

前言 总在平常看到像这样的图片 背景是如何实现的呢 背景效果的多样性和美观性直接影响用户体验。CSS 渐变为设计师提供了一种强大且灵活的方法来创建引人注目的背景。渐变是颜色之间平滑过渡的效果&#xff0c;通过调整渐变类型和设置&#xff0c;你可以轻松实现从简单到复杂…

和弦图制作软件有哪些,和弦音乐制作软件推荐

在音乐创作与教学领域&#xff0c;和弦图作为视觉化展现音乐和声结构的工具&#xff0c;扮演着至关重要的角色。随着技术的发展&#xff0c;众多和弦图制作软件应运而生&#xff0c;旨在简化创作流程&#xff0c;提升学习效率。然而&#xff0c;面对琳琅满目的选项&#xff0c;…

【Linux】多线程:线程控制

目录 一、创建线程&#xff1a;pthread_create 二、线程终止&#xff1a;pthread_exit、return、pthread_cancel 三、线程等待&#xff1a;pthread_join 四、线程分离&#xff1a;pthread_detach 五、如何创建并使用多线程 六、对线程进行封装 一、创建线程&#xff1a…

ModuleNotFoundError: No module named ‘keras.layers.core‘怎么解决

问题 ModuleNotFoundError: No module named keras.layers.core&#xff0c;如图所示&#xff1a; 如何解决 将from keras.layers.core import Dense,Activation改为from tensorflow.keras.layers import Dense,Activation&#xff0c;如图所示&#xff1a; 顺利运行&#xf…

中秋快到了,要给哪些国外客户送祝福(附贺卡模板)

马上就要中秋节了&#xff0c;在这里提前祝小伙伴们中秋节快乐&#xff0c;身体健康&#xff0c;阖家团圆&#xff0c;业绩越来越好&#xff0c;公司越来越好&#xff0c;一切都越来越好&#xff01; 中秋节是我们非常重要的几个传统节日之一了&#xff0c;除了我们自己庆祝之…

深入理解Java中的clone对象

目录 1. 为什么要使用clone 2. new和clone的区别 3. 复制对象和复制引用的区别 4.浅克隆和深克隆 5. 注意事项 1. 为什么要使用clone 在实际编程过程中&#xff0c;我们常常遇到这种情况&#xff1a;有一个对象 A&#xff0c;需要一个和 A 完全相同新对象 B&#xff0c;并…

【【通信协议之ARP的FPGA实现其一】】

通信协议之ARP的FPGA实现其一 介绍 ARP 协议分为 ARP 请求和 ARP 应答&#xff0c;源主机发起查询目的 MAC 地址的报文称为 ARP 请求&#xff0c;目的主机响应源主机并发送包含本地 MAC 地址的报文称为 ARP 应答。当主机需要找出这个网络中的另一个主机的物理地址时&#xff0…

点击化学 ,如何用最简单的试剂叠氮化修饰后用于Click Reaction?

“点击化学”这一术语由斯克里普斯研究所的K. B. Sharpless 于2001年首次提出&#xff0c;这是一类涉及碳-杂原子间 化学键形成的反应&#xff0c;该类反应具有收率高&#xff0c;选择性好的特 点。词条“点击”意为将分子片段拼接起来就像将安全带扣 环的两部分扣起来一样简单…

大学英语四六级报名照不通过的原因

大学英语四六级报名照不通过的原因 #英语四六级 #大学英语四六级 #大学英语四六级考试 #英语四六级报名照片 #英语四六级考试报名照片

数仓建模:数仓设计中的10个陷阱

目录 0 引言 1 主要内容 1.1 过于迷恋技术&#xff0c;而没有将重点放在业务需求和目标上 1.2 没有或无法找到一个有影响的、平易近人的、明白事理的高级管理人员作为数仓建设的发起人 1.3 将项目处理为一个巨大的持续多年的项目&#xff0c;而不是追求更容易管理的、虽然…

日光辐射系统室内太阳光模拟器

太阳光模拟器能够为实验室环境提供稳定可靠的光照环境&#xff0c;其作用相当于将自然太阳光“搬进”室内实验室。这对于研究太阳能电池、光伏材料及其他与太阳能相关的设备和材料性能至关重要。 1.氙灯灯泡功率&#xff1a;≥450W&#xff1b; 2.输出光束尺寸&#xff1a;≥22…

秃姐学AI系列之:实战Kaggle比赛:图像分类(CIFAR-10)

目录 准备工作 整理数据集 将验证集从原始的训练集中拆分出来 整理测试集 使用函数 图像增广 读取数据集 定义模型 定义训练函数 训练和验证数据集 对测试集进行分类并提交结果 准备工作 首先导入竞赛需要的包和模块 import collections import math import os i…

智能优化算法-樽海鞘优化算法(SSA)(附源码)

目录 1.内容介绍 2.部分代码 3.实验结果 4.内容获取 1.内容介绍 樽海鞘优化算法 (Salp Swarm Algorithm, SSA) 虽然名称中提到的是“樽海鞘”&#xff0c;但实际上这个算法是基于群体智能的一种元启发式优化算法&#xff0c;它模拟了樽海鞘&#xff08;Salps&#xff09;在海…

第67期 | GPTSecurity周报

GPTSecurity是一个涵盖了前沿学术研究和实践经验分享的社区&#xff0c;集成了生成预训练Transformer&#xff08;GPT&#xff09;、人工智能生成内容&#xff08;AIGC&#xff09;以及大语言模型&#xff08;LLM&#xff09;等安全领域应用的知识。在这里&#xff0c;您可以找…

Leetcode sql high frequency questions 50 (based)

high frequency SQL 50 (basic version) 高頻sql題目(Leetcode) 查詢 1757. 可回收且低脂的产品 Question 表&#xff1a;Products ---------------------- | Column Name | Type | ---------------------- | product_id | int | | low_fats | enum | | rec…

评测AI写毕业论文软件排行榜前十名的网站

在当今信息爆炸的时代&#xff0c;AI智能写作工具已经成为我们写作过程中的得力助手。特别是对于学术论文的撰写&#xff0c;这些工具不仅能够提高写作效率&#xff0c;还能帮助用户生成高质量的文稿。以下是五款值得推荐的AI智能写论文软件&#xff0c;其中特别推荐千笔-AIPas…

Mysql基础练习题 1729.求关注者的数量 (力扣)

编写解决方案&#xff0c;对于每一个用户&#xff0c;返回该用户的关注者数量。 #按 user_id 的顺序返回结果表 题目链接&#xff1a; https://leetcode.cn/problems/find-followers-count/description/ 建表插入语句&#xff1a; Create table If Not Exists Followers(us…

VMware Workstation Pro 17 下载教程(Window环境)

自从24年中旬&#xff0c;博通公司以 610 亿美元收购的 VMware 宣布对其虚拟化软件套件进行一些重大调整。Windows 和 Linux 版 VMware Workstation Pro 和 Mac 版 VMware Fusion 不再需要个人使用许可证&#xff0c;也就是对个人用户免费。 1. 下载方式 Windows 和 Linux 版…