React:Router-1.BrowserRouter组件式

使用步骤
  1. 安装 react-router-dom 依赖
$ npm install react-router-dom@6
  1. 导入 BrowserRouter, Link, Routes, Route 对象
import {BrowserRouter, Link, Routes, Route} from 'react-router-dom';

3.BrowserRouter:history模式路由; HashRouter:哈希模式路由
示例:

// app.js
import React from "react";
import {BrowserRouter, Link, Routes, Route} from 'react-router-dom';
import Home from './Home';
import About from "./About";function App() {return (<BrowserRouter><Link to="/">首页</Link><Link to="/about">关于</Link><Routes><Route path="/" element={<Home />}></Route><Route path="/About" element={<About />}></Route></Routes></BrowserRouter>)
}export default App;// About.jsfunction About() {return (<div>关于</div>)
}export default About;// Home.jsfunction Home() {return (<div>首页</div>)
}export default Home;

在这里插入图片描述

编程式导航

使用 useNavigate 函数实现

// 1.导入 useNavigate 函数
import {useNavigate} from 'react-router-dom';function Home() {const navigate = useNavigate();// 2.跳转到 Login 组件const goLogin = () => {navigate('/Login');}return (<div>首页<button onClick={goLogin}>登录</button></div>)
}export default Home;
路由传参
1. /about?id=100&name=李白
// 传参
navigate('/Login?id=1001&name=李白');// 取参数
import {useSearchParams} from 'react-router-dom';const [params] = useSearchParams();
const id = params.get("id");
const name = params.get("name");
2./about/1000
// 传参
navigate('/Login/1000');// 取参数
import {useParams} from 'react-router-dom';const params = useParams();
const id = params.id
嵌套路由

Outlet 声明嵌套路由出口
如下 Layout 下边包含两个 二级路由 UserInfo
其中,通过增加 index属性 来设置默认项

// Layout.jsx
import { Outlet } from "react-router-dom";export default function Layout() {return (<div>Layout{/* 二级路由出口 */}<Outlet></Outlet></div>)
}// App.js
function App() {return (<BrowserRouter><Link to="/">首页</Link><Link to="/about">关于</Link><Routes><Route path="/" element={<Home />}></Route><Route path="/About" element={<About />}></Route><Route path="/Login" element={<Login/>}></Route><Route path="/Layout" element={<Layout/>}>{/** index 设置该路由为默认项 */}<Route index element={<Info/>}></Route><Route path="User" element={<User/>}></Route></Route></Routes></BrowserRouter>)
}

在这里插入图片描述

404匹配
function App() {return (<BrowserRouter><Link to="/">首页</Link><Link to="/about">关于</Link><Routes><Route path="/" element={<Home />}></Route><Route path="/About" element={<About />}></Route>]{/** 所有路由都未匹配上 404兜底 */}<Route path="*" element={<NotFound />}></Route></Routes></BrowserRouter>)
}
路由懒加载

需要借助 lazySuspense

import {lazy, Suspense} from "react";
import {createBrowserHistory} from "history";
import {HistoryRouter} from "react-router-dom";// 按需导入组件
const Login = lazy(() => import("./pages/Login"));let history = createBrowserHistory();// 使用 Suspense 包裹着组件, fallback中设置的是 loadig样式
function App() {return (<HistoryRouter histtory={history}><Suspensefallback={<divstyle={{textAlign: 'center',marginTop: 200}}>Loading....</div>}><Routes>....</Routes></Suspense></HistoryRouter>)
}

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

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

相关文章

代码随想录算法训练营第二十二天|654.最大二叉树 、617.合并二叉树 、700.二叉搜索树中的搜索 、 98.验证二叉搜索树

654.最大二叉树 文档讲解&#xff1a;代码随想录 题目链接&#xff1a;. - 力扣&#xff08;LeetCode&#xff09; 递归的三要素&#xff1a; 第一要素&#xff1a;明确这个函数想要干什么 传入一个数组&#xff0c;针对这个数组构造一个最大二叉树 第二要素&#xff1a;寻…

跟TED演讲学英文:What moral decisions should driverless cars make by Iyad Rahwan

What moral decisions should driverless cars make? Link: https://www.ted.com/talks/iyad_rahwan_what_moral_decisions_should_driverless_cars_make Speaker: Iyad Rahwan Date: September 2016 文章目录 What moral decisions should driverless cars make?Introduct…

kubeflow简单记录

kubeflow 13.7k star 1、Training Operator 包括PytorchJob和XGboostJob&#xff0c;支持部署pytorch的分布式训练 2、KFServing快捷的部署推理服务 3、Jupyter Notebook 基于Web的交互式工具 4、Katib做超参数优化 5、Pipeline 基于Argo Workflow提供机器学习流程的创建、编排…

漏洞挖掘之某厂商OAuth2.0认证缺陷

0x00 前言 文章中的项目地址统一修改为: a.test.com 保护厂商也保护自己 0x01 OAuth2.0 经常出现的地方 1&#xff1a;网站登录处 2&#xff1a;社交帐号绑定处 0x02 某厂商绑定微博请求包 0x02.1 请求包1&#xff1a; Request: GET https://www.a.test.com/users/auth/weibo?…

mysql从入门到起飞+面试基础题

mysql基础 MySQL基础 企业面试题1 代码 select m.id,m.num from ( select t.id as id,count(1) num from ( select ra.requester_id as id from RequestAccepted raunion all select ra.accepter_id as id from RequestAccepted ra ) t group by t.id ) m group by id ord…

生产制造中刀具管理系统,帮助工厂不再频繁换刀

一、刀具管理的定义与重要性 刀具管理是指对生产过程中使用的各种刀具进行计划、采购、存储、分配、使用、监控、维修和报废等全过程的管理。刀具作为制造过程中的直接工具&#xff0c;其性能、质量和使用效率直接影响产品的加工精度、表面质量和生产效率。因此&#xff0c;建…

ICode国际青少年编程竞赛- Python-1级训练场-基础训练2

ICode国际青少年编程竞赛- Python-1级训练场-基础训练2 1、 a 4 # 变量a存储的数字是4 Dev.step(a) # 因为变量a的值是4&#xff0c;所以Dev.step(a)就相当于Dev.step(4)2、 a 1 # 变量a的值为1 for i in range(4):Dev.step(a)Dev.turnLeft()a a 1 # 变量a的值变为…

ios苹果App上架到应用商店的操作流程

哈喽&#xff0c;大家好呀&#xff0c;淼淼又来和大家见面啦&#xff0c;发现最近有许多想要上架App的小伙伴&#xff0c;但是又不知道要怎么操作&#xff0c;对于开发者而言&#xff0c;将精心打造的iOS应用程序成功上架到苹果的 App Store 是向全球用户展示咱们的产品和服务的…

Windows+Linux的虚拟串口工具

文章目录 1.Windows虚拟串口工具1.1 安装教程1.2 使用方法 2.Linux系统虚拟串口工具2.1 socat安装2.2 开启虚拟串口2.3 测试2.3.1 命令测试2.3.2 Cutecom工具测试 2.4 关闭虚拟串口 3.参考资料 1.Windows虚拟串口工具 下载地址&#xff1a;https://www.downxia.com/downinfo/4…

9、String类型和基本数据类型转换(Java)

String类型和基本数据类型转换 1、基本数据类型转String类型2、String类型转基本数据类型⭐ 1、基本数据类型转String类型 Java中String类型是字符串类型&#xff0c;是用 “ ” 双引号括起来的内容&#xff0c;所以基本数据类型转String类型直接&#xff0b;“ ”即可。&…

三年软件测试经验遭遇求职困境?揭秘求职市场的隐藏陷阱

1.个人背景 小李&#xff0c;我的一位朋友&#xff0c;拥有三年多的软件测试工作经验。他本科毕业后便投身于测试行业&#xff0c;熟练掌握Python编程&#xff0c;能够编写自动化测试脚本&#xff0c;并且熟悉Selenium和性能测试。然而&#xff0c;尽管他具备这些技能和经验&am…

企业做网站,如何设计才有创意?

企业做网站&#xff0c;如何设计才有创意&#xff1f;我们都希望能打造一个有创意的网站建设&#xff0c;能在众多网站中脱颖而出&#xff0c;能够营销推广公司的产品&#xff0c;为公司带来更多的经济效益收益。广州网站建设的时候&#xff0c;记住直观的设计可以让用户体验更…

《尿不湿级》STM32 F103C8T6最小系统板搭建(五)BOOT

一、BOOT是什么&#xff1f; 大多数初学者第一次接触BOOT总是对这个词感到不解&#xff0c;从哪冒出一个奇奇怪怪的东西还要接跳线帽&#xff0c;为什么要配置它才能进行串口程序的下载&#xff1f;为什么不正确配置会导致单片机无法正常启动…… boot&#xff0c;及物动词&…

配置 Trunk,实现相同VLAN的跨交换机通信

1.实验环境 公司的员工人数已达到 100 人&#xff0c;其网络设备如图所示。现在的网络环境导致广播较多网速慢&#xff0c;并且也不安全。公司希望按照部门划分网络&#xff0c;并且能够保证一定的网络安全性。 其网络规划如下。 PC1和 PC3为财务部&#xff0c;属于VLAN 2&…

【NodeMCU实时天气时钟温湿度项目 5】获取关于城市天气实况和天气预报的JSON信息(心知天气版)

| 今天是第五专题内容&#xff0c;主要是介绍如何从心知天气官网&#xff0c;获取包含当前天气实况和未来 3 天天气预报的JSON数据信息。 在学习获取及显示天气信息前&#xff0c;我们务必要对JSON数据格式有个深入的了解。 如您需要了解其它专题的内容&#xf…

手撕多线程

用一个双线程轮流打印1-100 // 定义一个类&#xff0c;用于交替打印奇偶数 public class AlternatePrinting {// 当前待打印的数字&#xff0c;初始为1private int currentNumber 1;// 用作线程间同步的锁对象private final Object lock new Object();// 程序入口public sta…

【如此简单!数据库入门系列】之无序不代表混乱 -- 堆文件

文章目录 前言堆文件链表实现页目录实现总结系列文章 前言 还记得上次遗留的问题吗&#xff1f; 以什么组织方式将数据保存在磁盘中&#xff1f; 今天我们接着讨论这个问题。 首先想一个问题&#xff1a;有一天&#xff0c;你开着自己心爱的大型SUV去超市购物。在停车场入口看…

代码随想录Day 41|Leetcode|Python|198.打家劫舍 ● 213.打家劫舍II ● 337.打家劫舍III

198.打家劫舍 你是一个专业的小偷&#xff0c;计划偷窃沿街的房屋。每间房内都藏有一定的现金&#xff0c;影响你偷窃的唯一制约因素就是相邻的房屋装有相互连通的防盗系统&#xff0c;如果两间相邻的房屋在同一晚上被小偷闯入&#xff0c;系统会自动报警。 给定一个代表每个…

linux上go项目打包与部署

1.第一步把项目打包 1.确保本地goland的操作系统为linux go env找到GOOS如果为window就修改为Linux 修改命令为 go env -w GOOSlinux2.打包 在项目根目录下输入 go build main.go然后项目根目录下会出现一个mian的二进制文件 3.上传包 将 main 程序包放到服务的目录下&…

python与java用途区别有哪些

区别&#xff1a; 1.Python比Java简单&#xff0c;学习成本低&#xff0c;开发效率高。 2.Java运行效率高于Python&#xff0c;尤其是纯Python开发的程序&#xff0c;效率极低。 3.Java相关资料多&#xff0c;尤其是中文资料。 4.Java版本比较稳定&#xff0c;Python2和3不…