当前位置: 首页 > article >正文

react js 路由 Router

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

起因, 目的:

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

我看的视频教程

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.kler.cn/a/300182.html

相关文章:

  • 类和对象(中)
  • 哈喽GPT-4o,现代程序员提高编码能力的正确打开方式
  • NVIDIA AI Workbench 让 Windows 上的 GPU 使用更加简便
  • 基于Spring搭建SpringMvc框架
  • pptpd配置文件/etc/pptpd.conf详解
  • 数据库中的主键和外键分别是什么意思?
  • Leetcode面试经典150题-207.课程表
  • 【代码随想录训练营第42期 Day56打卡 - 图论Part6 - 并查集2 - 冗余连接问题
  • Debug-027-el-tooltip组件的使用及注意事项
  • FPGA设计-如何使用增量编译流程
  • 基于java+springboot+vue实现的手机商城系统(文末源码+Lw)137
  • WEB渗透权限维持篇-隐藏windows服务
  • html 引入 css文档
  • 浏览器中的JavaScript核心BOM(浏览器对象模型)重点掌握对象之History对象的属性与方法
  • 力扣: 快乐数
  • 推理与训练,分布式训练
  • FFmpega安装教程
  • 华为云低代码AstroZero技巧教学4:花瓣图展示 给数据加点色彩
  • Android中如何实现adb向应用发送特定指令并接收返回
  • 计算机网络基础概念 交换机、路由器、网关、TBOX