react hooks 学习之react router v6 路由表配置

/ 如果你是在ts中,那么这个这个文件名是router.ts那么这个<Home/>这里会报eslint错误,所以为了解决这个错误,直接改成router.tsx就行

import { RouteObject } from 'react-router-dom';
import Home from '../page/Home';
import About from '../page/About';// react router v6·路由配置
const routes: RouteObject[] = [{path: '/',element: <Home />,},{path: '/about',element: <About />,},{path: '*',element: <div>404</div>,}
];export default routes;

如果说你非要用.ts也行,就像下边这样,可以避免eslint报错

// elements.tsx
import React from 'react';
import Home from '../page/Home';
import About from '../page/About';export const HomeElement = <Home />;
export const AboutElement = <About />;// routes.ts
import { RouteObject } from 'react-router-dom';
import { HomeElement, AboutElement } from './elements';const routes: RouteObject[] = [{path: '/',element: HomeElement,},{path: '/about',element: AboutElement,},
];export default routes;

然后就是app.tsx中渲染问题,v6版本的useRoutes很好用

// App.tsx
import React from 'react';
import { useRoutes } from 'react-router-dom';
import routes from './router'; // 导入路由配置function App() {const routing = useRoutes(routes);return (<div>{routing}</div>);
}export default App;

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

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

相关文章

JVM 类加载机制(七)

1.加载&#xff0c;验证&#xff0c;准备&#xff0c;解析&#xff0c;初始化 ​ JVM 类加载机制分为五个部分&#xff1a;加载&#xff0c;验证&#xff0c;准备&#xff0c;解析&#xff0c;初始化&#xff0c;下面我们就分别来看一下这五个过程。 1.1. 加载 ​ 加载是类加…

heatmap.js热力图【vue3】

1.代码 <template><div><div>实时热力图</div><div id"heatmap" ref"heatmapContainer" class"demo-wrapper"><div class"tooltip"></div><div class"legend-area"><h…

3.2 Puppet 和 Chef 的比较与应用

Puppet 和 Chef 的比较与应用 文章目录 Puppet 和 Chef 的比较与应用Puppet 和 Chef 简介工作原理对比**模块化的重要性**&#xff1a; Puppet 和 Chef 简介 介绍 Puppet 和 Chef 这两个流行的配置管理工具的背景和用途。强调它们的共同目标&#xff1a;实现自动化的系统配置和…

Spring Cloud Stream 4.0.4 rabbitmq 发送消息多function

使用 idea 创建 Springboot 项目 添加 Spring cloud stream 和 rabbitmq 依赖 pom文件 <?xml version"1.0" encoding"UTF-8"?> <project xmlns"http://maven.apache.org/POM/4.0.0" xmlns:xsi"http://www.w3.org/2001/XMLSchem…

基于Java SSM人力资源管理系统

人力资源管理系统实现对企业人力资源的科学管理。企业有多个部门&#xff0c;每个部门有——名经理和多名员工&#xff0c;公司设置多级岗位&#xff0c;对应不同薪酬标准&#xff0c;员工日常工作进行考勤&#xff0c;岗位变动需要进行登记。系统管理的对象及操作主要有&#…

学生信息管理系统

摘 要 学生成绩管理系统是典型的信息管理系统(MIS)&#xff0c;其开发主要包括后台数据库的建立和维护以及前端应用程序的开发两个方面。经过分析&#xff0c;我们使用Microsoft公司的C语言开发工具&#xff0c;将与C语言技术与数据库SQL2008相结合进行设计。首先&#xff0c;…

【多线程】线程的三种常见创建方式

文章目录 线程创建方式1——Thread线程创建方式2——Runnable线程创建方式2——匿名内部类线程创建方式3——Callable、FutureTask,带返回值 线程其实是程序中的一条执行路径。 那怎样的程序才是多线程程序呢&#xff1f; 例如12306网站就是支持多线程的&#xff0c;因为同时可…

一下午终于配好:如何用vs code连接远程主机jupyter server(notebook/lab)

因为教研室的机器有2060&#xff0c;笔记本只有集成显卡&#xff0c;虽然也可用浏览器访问&#xff0c;但是vs code不论从界面还是扩展功能来说&#xff0c;都有更好的编程体验&#xff0c;所以想通过vs code远程连接jupyter server。 要实现该需求总体需要三个步骤&#xff1…

Python推导式详细讲解

更多资料获取 &#x1f4da; 个人网站&#xff1a;ipengtao.com 在Python中&#xff0c;推导式是一种简洁而强大的语法特性&#xff0c;可以用来创建列表、集合、字典等数据结构。本文将深入探讨Python中的三种推导式&#xff1a;列表推导式、集合推导式和字典推导式&#xff…

@Component 和 @Bean 和 @configuration的区别

从位置上确定了每个注解的区别 从注解的位置上来确定这三个注解的区别&#xff0c;我们可以看到它们的应用场景和作用不同。 Component注解&#xff1a; Component注解是标记在类级别上的注解&#xff0c;用于将一个类标识为Spring容器的组件。通过组件扫描&#xff08;compon…

JavaScript中处理时间差

ES6版本 function countdown(endTime, includeSeconds true) {// 获取当前时间let now new Date();// 将传入的结束时间字符串转换为日期对象let endDateTime new Date(endTime);// 检查传入的时间字符串是否只包含日期&#xff08;不包含时分秒&#xff09;if (endTime.tr…

喜讯:麦田(苏州)医学科技有限公司立项项目获得2024年度浙江省医药卫生科技计划资助的公告

喜讯&#xff1a;麦田&#xff08;苏州&#xff09;医学科技有限公司立项项目获得2024年度浙江省医药卫生科技计划资助的公告 我们麦田&#xff08;苏州&#xff09;医学科技有限公司非常荣幸地宣布&#xff0c;由我们联合浙江省人民医院、杭州市红十字会医院、杭州师范大学共同…

Docker-多容器应用

一、概述 到目前为止&#xff0c;你一直在使用单个容器应用。但是&#xff0c;现在您将 MySQL 添加到 应用程序堆栈。经常会出现以下问题 - “MySQL将在哪里运行&#xff1f;将其安装在同一个 容器还是单独运行&#xff1f;一般来说&#xff0c;每个容器都应该做一件事&#x…

强化学习——简单解释

一、说明 最近 OpenAI 上关于 Q-star 的热议激起了我温习强化学习知识的兴趣。这是为强化学习 (RL) 新手提供的复习内容。 二、强化学习的定义 强化学习是人类和其他动物用来学习的学习类型。即&#xff0c;通过阅读房间来学习。&#xff08;从反馈中学习&#xff09;。让我解…

在C#中,PropertyInfo.SetValue方法用于设置属性值

在C#中&#xff0c;PropertyInfo.SetValue方法用于设置属性值。该方法接受两个参数&#xff1a;对象实例和属性值。下面是一个示例代码&#xff0c;演示如何使用PropertyInfo.SetValue方法设置属性值&#xff1a; using System; using System.Reflection; public class Per…

基于深度学习CRNN的水表读数识别系统

1.研究背景与意义 项目参考AAAI Association for the Advancement of Artificial Intelligence 研究背景与意义 随着科技的不断发展&#xff0c;深度学习技术在各个领域都取得了显著的成果。其中&#xff0c;基于深度学习的图像识别技术在计算机视觉领域具有重要的应用价值。…

Linux环境搭建(Ubuntu22.04)+ 配置共享文件夹(Samba)

Linux开发环境准备 搭建Linux开发环境所需要的软件如下&#xff1a; VMware虚拟机&#xff1a;用于运行Linux操作系统的虚拟机软件之一&#xff0c;VMware下载安装在文章中不做说明&#xff0c;可自行百度谢谢Ubuntu光盘镜像&#xff1a;用于源代码编译&#xff0c;有闲置计算…

maven生命周期回顾

目录 文章目录 **目录**两种最常用打包方法&#xff1a;生命周期&#xff1a; 两种最常用打包方法&#xff1a; 1.先 clean&#xff0c;然后 package2.先 clean&#xff0c;然后install 生命周期&#xff1a; 根据maven生命周期&#xff0c;当你执行mvn install时&#xff0c…

大数据Hadoop-HDFS_架构、读写流程

大数据Hadoop-HDFS 基本系统架构 HDFS架构包含三个部分&#xff1a;NameNode&#xff0c;DataNode&#xff0c;Client。 NameNode&#xff1a;NameNode用于存储、生成文件系统的元数据。运行一个实例。 DataNode&#xff1a;DataNode用于存储实际的数据&#xff0c;将自己管理…

Python (二) 读写excel文件

程序员的公众号&#xff1a;源1024&#xff0c;获取更多资料&#xff0c;无加密无套路&#xff01; 最近整理了一波电子书籍资料&#xff0c;包含《Effective Java中文版 第2版》《深入JAVA虚拟机》&#xff0c;《重构改善既有代码设计》&#xff0c;《MySQL高性能-第3版》&…