Ant Design of React组件引用及路由跳转

Ant Design of React 学习笔记(2)

Ant Design of React组件引用及路由跳转,接着笔记(1)继续
这里我们主要3点:1.使用Ant的组件;2,如何引用页面组件;3,路由导航跳转

这是我的目录结构
在这里插入图片描述
公共组件目录定义了公共组件header,和底部公共组件footer
一,Ant组件的引用
在头部header里面引用Ant的导航菜单,代码:

import React from "react";
import type { MenuProps } from 'antd';
import { Menu } from 'antd';
import {useState} from "react";
import {Link, useLocation} from "react-router-dom";
const items: MenuProps['items'] = [{label: <Link to={'/'}>Home</Link>,key: '/',},{label: <Link to={'/product'}>Product</Link>,key: '/product',},{label: <Link to={'/about'}>About</Link>,key: '/about',}
];const App: React.FC = () => {const location=useLocation()const [, setCurrent] = useState(location.pathname);const onClick: MenuProps['onClick'] = (e) => {//console.log('click ', e);setCurrent(e.key);};return <Menu onClick={onClick} selectedKeys={[location.pathname]} mode="horizontal" items={items}/>;
};export default App;

二,页面组件的引用及导航路由跳转
先对index.tsx入口文件进行处理,代码如下:

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import {BrowserRouter, Route, Routes} from 'react-router-dom';
const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement
);
root.render(<BrowserRouter><React.StrictMode><Routes><Route path='*' Component={App}/></Routes></React.StrictMode></BrowserRouter>
);reportWebVitals();

注意:Route必须被Routers包裹

接下来来到App.tsx文件,引用公共头部和底部,并定义好内容content部分实现页面跳转内容部分刷新,代码如下:

import  React from 'react';
import { Route, Routes} from 'react-router-dom';
import Home from "./pages/home";
import About from "./pages/about";
import Product from "./pages/product";
import Header from "./component/header";
import Footer from "./component/footer";
import './App.css';
const App = () => {return (<div className="App"><div className="headerComp"><Header/></div><div className="content"><Routes><Route path='/' Component={Home} /><Route  path='/product' Component={Product} /><Route  path='/about' Component={About} /></Routes></div><div className="footerComp"><Footer/></div></div>);
}export default App;

注意:引用组件名称要大写开头,路径path要和头部菜单的key值对应,

home.tsx代码如下:

import React from "react";
import { Button } from 'antd';
const App:React.FC=()=>{return (<div>我是首页<Button type="primary">Button</Button></div>)
}export default App

效果如下:
在这里插入图片描述
注意如果要使用Ant 的图标,需要另外引入,从 4.0 开始,antd 不再内置 Icon 组件,需使用独立的包 @ant-design/icons
在项目下运行:

npm install @ant-design/icons --save

在这里插入图片描述
安装成功,在home.tsx文件引用

import React from "react";
import { Button } from 'antd';
import {AndroidOutlined} from '@ant-design/icons'
const App:React.FC=()=>{return (<div>我是首页<Button type="primary">Button</Button><p>安卓: <AndroidOutlined style={{color:"green",fontSize:"24px"}} /></p></div>)
}export default App

效果:
在这里插入图片描述

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

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

相关文章

一文读懂Base64

这几天在和第三方交互的时候&#xff0c;对方返回的数据是base64格式的数据&#xff0c;所以这两天又彻底捋了下Base64的来龙去脉。之前看过一篇文章说的非常好&#xff08;再找到给加上链接&#xff09;&#xff0c;我在这不详细说明了&#xff0c;只说转换过程。 还是使用中…

【算法刷题】【链表】链表内指定区间反转:将一个节点数为 size 链表 m 位置到 n 位置之间的区间反转,要求时间复杂度 O(n),空间复杂度)O(1)。

题目 解题 import java.util.*;/** public class ListNode {* int val;* ListNode next null;* public ListNode(int val) {* this.val val;* }* }*/public class Solution {/*** 代码中的类名、方法名、参数名已经指定&#xff0c;请勿修改&#xff0c;直接返回…

uboot启动流程-board_init_r函数执行过程

一. uboot启动流程 本文来了解 board_init_r 函数执行过程。_main函数会调用到 board_init_r 函数。 二. board_init_r函数执行过程 _main 函数会调用到 board_init_r 函数。 _main 函数在 uboot的 /arch/arm/lib/crt0.S 文件中。_main函数中&#xff0c;执行完 relocate_…

JAVA毕业设计098—基于Java+Springboot的在线教育课程视频(源码+数据库)

基于JavaSpringboot的在线教育课程视频(源码数据库)098 一、系统介绍 本系统分为管理员、教师、用户三种角色(角色菜单可自行分配) 用户功能&#xff1a; 注册、登录、课程搜索、视频观看、课程资料发布、资料浏览、用户中心、我的发布、通知信息、密码修改 教师功能&…

IP 子网划分(VLSM)

目录 一、 为什么要划分子网 二、如何划分子网 1、划分两个子网 2、划分多个子网 一、 为什么要划分子网 假设有一个B类IP地址172.16.0.0&#xff0c;B类IP的默认子网掩码是 255.255.0.0&#xff0c;那么该网段内IP的变化范围为 172.16.0.0 ~ 172.16.255.255&#xff0c;即…

【SpringCloud】Eureka原理分析、搭建Eureka服务、服务注册、服务发现

&#x1f40c;个人主页&#xff1a; &#x1f40c; 叶落闲庭 &#x1f4a8;我的专栏&#xff1a;&#x1f4a8; c语言 数据结构 javaEE 操作系统 Redis 石可破也&#xff0c;而不可夺坚&#xff1b;丹可磨也&#xff0c;而不可夺赤。 eureka 一、Eureka原理分析1.1 服务调用出现…

kafka与zookeeper的集群

基础配置 systemctl stop firewalld && systemctl disable firewalld setenforce 0 sed -i s/SELINUXenforcing/SELINUXdisabled/ /etc/selinux/configvi /etc/hosts ip1 node1 ip2 node2 ip3 node3zookeeper介绍 zookeeper是一个分布式的协调服务&#xff0c;主要用…

基于YOLOv5、YOLOv8的火灾检测(超实用项目)

目录 1.简介 2.YOLO算法 3.基于YOLOv5、YOLOv8的火灾检测 视频已上传b站 YOLOv5/YOLOv8的火灾检测&#xff08;超实用项目&#xff09;_哔哩哔哩_bilibili 本文为系列专栏&#xff0c;包括各种YOLO检测算法项目、追踪算法项目、双目视觉、深度结构光相机测距测速三维测量项…

【yaml文件的编写】

yaml文件编写 YAML语法格式写一个yaml文件demo创建资源对象查看创建的pod资源创建service服务对外提供访问并测试创建资源对象查看创建的service在浏览器输入 nodeIP:nodePort 即可访问 详解k8s中的port&#xff1a;portnodePorttargetPortcontainerPortkubectl run --dry-runc…

数据库 explain 关键字解析

目录 1. explain 概述 2. explain 关键字的使用方式 3. explain 的版本迭代 4. explain 只分析SQL语句&#xff0c;不执行SQL语句 5. explain 输出结果中各个字段的含义 6. type 表示检索表数据的方式 7. key_len表示使用的索引的长度 8. rows 表示预估读取到的行数 9…

电子招标投标系统 —采购招投标管理一体化系统-

项目说明 随着公司的快速发展&#xff0c;企业人员和经营规模不断壮大&#xff0c;公司对内部招采管理的提升提出了更高的要求。在企业里建立一个公平、公开、公正的采购环境&#xff0c;最大限度控制采购成本至关重要。符合国家电子招投标法律法规及相关规范&#xff0c;以及审…

chromadb 0.4.0 后的改动

本文基于一篇上次写的博客&#xff1a;[开源项目推荐]privateGPT使用体验和修改 文章目录 一.上次改好的ingest.py用不了了&#xff0c;折腾了一会儿二.发现privateGPT官方更新了总结下变化效果 三.others 一.上次改好的ingest.py用不了了&#xff0c;折腾了一会儿 pydantic和c…

redis分布式秒杀锁

-- 获取锁标识&#xff0c;是否与当前线程一致&#xff1f; if(redis.call(get, KEYS[1]) ARGV[1]) then-- 一致&#xff0c;删除return redis.call(del, KEYS[1]) end -- 不一致&#xff0c;直接返回 return 0package com.platform.lock;public interface ILock {/*** 获取锁…

全网最新最全的软件测试面试题

一、前言 与开发工程师相比&#xff0c;软件测试工程师前期可能不会太深&#xff0c;但涉及面还是很广的。 在一年左右的实习生或岗位的早期面试中&#xff0c;主要是问一些基本的问题。 涉及到的知识主要包括MySQL数据库的使用、Linux操作系统的使用、软件测试框架问题、测试…

【three.js】坐标辅助器和轨道控制器

结合上一篇基本的3d页面代码&#xff0c;我们在里面添加坐标辅助器&#xff0c;也就是x y z轴坐标系&#xff0c;这样可以更直观的查看物体的位置 一、添加坐标辅助器 查看效果&#xff0c;z轴不显示是因为&#xff0c;z轴是正对我们脸部&#xff0c;从我们正面看就是一个点 …

整体网络架构p22

1. 两次卷积&#xff0c;一次池化。得到一个三维特征图&#xff0c;然后让三维的特征图&#xff0c;三个值进行相乘拉成特征向量&#xff0c;把得到的结果需要靠全连接层。 带参数计算才算一层 算conv的个数FC全连接层就得到卷积神经网络的层数 FC:全连接层 2. 3.reset网络&a…

Fastadmin 子级菜单展开合并,分类父级归纳

这里踩过一个坑&#xff0c;fastadmin默认的展开合并预定义处理的变量是pid。 所以建表时父级id需要是pid&#xff1b; 当然不是pid也没关系&#xff0c;这里以cat_id为例&#xff0c;多加一步处理一样能实现。 废话少说上代码&#xff1a; 首先在控制器&#xff0c; 引用…

【Linux基础】Linux的基本指令使用(超详细解析,小白必看系列)

&#x1f449;系列专栏&#xff1a;【Linux基础】 &#x1f648;个人主页&#xff1a;sunnyll 目录 &#x1f4a6; ls 指令 &#x1f4a6; pwd指令 &#x1f4a6;cd指令 &#x1f4a6;touch指令 &#x1f4a6;mkdir指令&#xff08;重要&#xff09; &#x1f4a6;rmdir指令…

openwrt rm500u ncm方式拨号步骤记录

1.进入设备页面 用户名&#xff1a;root 2.创建接口 3.配置接口 国内APN 信息 中国移动APN&#xff1a;CMNET 中国联通APN&#xff1a;3GNET 中国电信APN&#xff1a;CTNET 4.防火墙配置 5.点击Save&Apply 6.配置完成后重启设备。重新进入设备页面&#xff0c;可以看…

【轻松玩转MacOS】外部设备篇

引言 在开始之前&#xff0c;我们先来了解一下为什么要连接外部设备。想象一下&#xff0c;你正在享受MacOS带来的便捷和高效&#xff0c;突然需要打印一份文件&#xff0c;但你发现打印机无法连接&#xff1b;或者你需要将手机投屏到电脑上&#xff0c;却不知道该如何操作。这…