React18 +ts 路由写法

server/2024/12/14 4:24:15/

命令:npm i react-router-dom
版本声明:

在这里插入图片描述
写法一:
src>router>index.tsx

javascript">import App from "../App";
import React, { lazy } from "react";
import { BrowserRouter, Routes, Route, Navigate } from "react-router-dom";
const Home = lazy(() => import("../views/Home"));// 抽取懒加载组件
const withReactSuspense = (comp: JSX.Element) => (// lazy路由懒加载 需要搭配 Suspense 组件进行优化<React.Suspense fallback={<div>Loading...</div>}>{comp}</React.Suspense>
);function baseRouter() {return (<BrowserRouter><Routes><Route path="/" element={<App />}>{/* Navigate 重定向 */}<Route path="/" element={<Navigate to="/home" />}></Route><Routepath="/home"element={withReactSuspense(<Home />)}></Route></Route></Routes></BrowserRouter>);
}export default baseRouter;

main.tsx

javascript">import React from "react";
import ReactDOM from "react-dom/client";
import Router from "./router";ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(<React.StrictMode><Router /></React.StrictMode>
);

App.tsx

javascript">import { Outlet } from "react-router-dom";function App() {return (<div className="App">{/* Outlet 占位符组件,类似于vue的router-view */}<Outlet /></div>);
}export default App;

第二种写法:


http://www.ppmy.cn/server/150003.html

相关文章

SCAU期末笔记 - Linux系统应用与开发教程课后习题

时间紧迫&#xff0c;只过一遍课后习题 第1章 Linux概述 1.Linux有哪些特点&#xff1f; 开放性、多用户、多任务、良好的用户界面、设备独立性、完善的网络功能、可靠的系统安全、良好的可移植性。 2.Linux和UNIX是什么关系&#xff1f; Linux是一个类UNIX内核的可自由发…

iPhone批量删除照片的方法

对于每一个iPhone用户来说&#xff0c;照片管理是一项日常而重要的任务。随着时间的积累&#xff0c;无数的照片快速填满了我们的存储空间&#xff0c;从美丽的风景到重要的家庭聚会&#xff0c;每一张照片都记录着我们生活中的瞬间。然而&#xff0c;当存储空间即将耗尽时&…

【vue2】文本自动省略组件,支持单行和多行省略,超出显示tooltip

代码见文末 vue3实现 最开始就用的vue3实现&#xff0c;如下 Vue3实现方式 vue2开发和使用文档 组件功能 TooltipText 是一个文字展示组件&#xff0c;具有以下功能&#xff1a; 文本显示&#xff1a;支持单行和多行文本显示。自动判断溢出&#xff1a;判断文本是否溢出…

Spring Boot接收从前端传过来的数据常用方式以及处理的技巧

Spring Boot接收从前端传过来的数据常用方式以及处理的技巧 一、params 传参 restful风格的请求 二、Body中的form-data 传参三、Body中的raw的json格式 传参 一、params 传参 参数是会拼接到url后面的请求 场景规范&#xff1a;url后面的key值<3个参数的时候&#xff0c…

深入探讨Python正则表达式

则表达式&#xff08;Regular Expressions&#xff0c;简称 regex 或 regexp&#xff09;是一种强大的文本处理工具&#xff0c;可以用于搜索、匹配、替换、分割等操作。Python 的 re 模块提供了丰富的正则表达式功能。 一、正则表达式的基础知识 正则表达式是一种模式匹配工具…

VLA模型

目录 引言1. 机器人大模型面临的挑战2. 目前的数据集2.1 RT-12.2 Open X-Embedding2.3 DROID 3. 目前的VLA模型3.1 Goat3.2 RT-13.2.1 总体架构3.2.2 效果 3.3 RT-23.3.1 总体架构3.3.2 效果 3.4 RT-X3.4.1 模型效果1). RT-1-X2). RT-2-X 3.5 RT-H3.5.1 总体架构3.5.2 效果 3.6…

【机器人】控制之稳定性判定: 李雅普诺夫Lyapunov (4) 李函数设计再举例

图中的动力学方程和 Lyapunov 函数构造方式是基于能量的物理意义&#xff0c;以及该系统的特性推导出来的。以下详细解释为什么可以用图中的 Lyapunov 函数 VV 来描述该动力学方程的特性。 1. 动力学方程的意义 2. Lyapunov 函数的物理意义 3. 为什么可以用这个 Lyapunov 函数表…

PCDN加速对游戏的优势

PCDN&#xff08;Peer-to-CDN&#xff09;对游戏加速确实具有显著优势。以下是对这一观点的详细解释&#xff1a; 一、PCDN技术原理 PCDN是一种基于P2P&#xff08;Peer-to-Peer&#xff09;技术的内容分发网络&#xff0c;通过挖掘和利用边缘网络的闲置资源&#xff0c;构建一…