新建react项目，react-router-dom配置路由，引入antd

提示：reactrouter6.4+版本，与reactrouter5.0的版本用法有区别，互不兼容需注意

文章目录

  • 前言
  • 一、创建项目
  • 二、新建文件并引入react-router-dom、antd
  • 三、配置路由跳转
  • 四、效果
  • 五、遇到的问题
  • 六、参考文档
  • 总结

前言

需求：新建react项目，react-router-dom配置路由，引入antd

一、创建项目

1、创建与安装

npx create-react-app my-react-app
cd my-react-app

项目结构
在这里插入图片描述

npm install react-router-dom
npm install antd –save

在这里插入图片描述
2、修改文件
app.js

import './App.css';
function App() {
  return (
    <div>
      my react app
    </div>
  );
}
export default App;

app.css

.App {
  text-align: center;
}

3、启动预览

npm start

在这里插入图片描述

二、新建文件并引入react-router-dom、antd

1、新建文件

head.js、home.js、my.js、order.js、pay.js内容基本一致，贴一个例子，其余修改对应值即可

import React from 'react';

class Pay extends React.Component {
  render() {
    return <div>Pay</div>;
  }
}
export default Pay;

在这里插入图片描述
main.js

import React from 'react';
import { Outlet } from "react-router-dom";
class Main extends React.Component {
  render() {
    return <div><Outlet /></div>;
  }
}
export default Main;

side.js

import React from 'react';
import Routes from '../routes';
import { Menu } from 'antd';
import { useNavigate } from "react-router-dom";
let menus = [];
Routes.forEach((item,index)=>{
  let obj = {
    key:index,
    label:item.label,
  }
  if(item.children){ 
    item.children.forEach((citem,i)=>{
      citem.key=index+'-'+i;
    });
    obj.children = item.children
   }
  menus.push(obj);
});
export default function Side() {
  const navigate = useNavigate();
  function goPath(e){
    let keys = e.key.split('-');
    let route,cRoute;
    route = Routes[keys[0]];
    if(route.children){
      cRoute = route.children[keys[1]];
    }
    let path = route.path + (cRoute?'/'+cRoute.path:'');
    navigate(path);
  }
  return <div>
    <Menu
      defaultSelectedKeys={['0']}
      defaultOpenKeys={['1']}
      mode="inline"
      theme="dark"
      items={menus}
      onClick={goPath}
    />
  </div>;
}

routes/index.js

import Home from '../components/home';
import My from '../components/my';
import Order from '../components/order';
import Pay from '../components/pay';
import Main from '../components/main';

const Routes = [
  {
    path: "/",
    label:'首页',
    element: <Home/>,
  },
  {
    path: "main",
    label:'业务',
    element: <Main/>,
    children:[
      {
        path: "order",
        label:'订单',
        element: <Order/>,
      },
      {
        path: "pay",
        label:'支付信息',
        element: <Pay/>,
      },
    ]
  },
  {
    path: "my",
    label:'我的',
    element: <My/>,
  },
];
export default Routes;

2、新建后文件结构
在这里插入图片描述

三、配置路由跳转

1、修改App.js和App.css文件
App.js

import { BrowserRouter ,Route,Routes} from "react-router-dom";
import './App.css';
import routes from './routes';
import Head from './components/head';
import Side from './components/side';
function renderRoute(){
  let arr = [];
  routes.forEach((item,i)=>{
    if(item.children){
      item.children.forEach((citem,ci)=>{
        arr.push(<Route key={i+'-'+ci} path={item.path+'/'+citem.path} element={citem.element}></Route>);
      })
    }else{
      arr.push(<Route key={i} path={item.path} element={item.element}></Route>);
    }
  })
  return arr;
}

function App() {
  return (
    <div className="App">
      <BrowserRouter>
      <div className='app_head'><Head/></div>
        <div className='app_side'><Side/></div> 
        <div className='app_main'>
          <Routes>
            { renderRoute() }
          </Routes>
        </div> 
      </BrowserRouter>
    </div>
  );
}
export default App;

App.css

.App {
  text-align: center;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.app_head{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 64px;
  background-color: #dbeff3;
}
.app_side{
  position: absolute;
  top: 64px;
  left: 0;
  bottom: 0;
  width: 320px;
  background-color: #707472;
}
.app_main{
  position: absolute;
  top: 64px;
  left: 320px;
  bottom: 0;
  right: 0;
  background-color: #fff;
}

四、效果

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

五、遇到的问题

在这里插入图片描述

useNavigate必须在router component里使用，side.js里调用的useNavigate，所以side
componet必须在BrowserRouter里

app.js错误写法

import { BrowserRouter ,Route,Routes} from "react-router-dom";
import './App.css';
import routes from './routes';
import Head from './components/head';
import Side from './components/side';
function renderRoute(){
  let arr = [];
  routes.forEach((item,i)=>{
    if(item.children){
      item.children.forEach((citem,ci)=>{
        arr.push(<Route key={i+'-'+ci} path={item.path+'/'+citem.path} element={citem.element}></Route>);
      })
    }else{
      arr.push(<Route key={i} path={item.path} element={item.element}></Route>);
    }
  })
  return arr;
}

function App() {
  return (
    <div className="App">
     
      <div className='app_head'><Head/></div>
        <div className='app_side'><Side/></div> 
        <BrowserRouter>
          <div className='app_main'>
            <Routes>
              { renderRoute() }
            </Routes>
          </div> 
        </BrowserRouter>
    </div>
  );
}
export default App;

在这里插入图片描述在这里插入图片描述

useNavigate应该放在一个react function component里

side.js错误写法

import React from 'react';
import Routes from '../routes';
import { Menu } from 'antd';
import { useNavigate } from "react-router-dom";
let menus = [];
Routes.forEach((item,index)=>{
  let obj = {
    key:index,
    label:item.label,
  }
  if(item.children){ 
    item.children.forEach((citem,i)=>{
      citem.key=index+'-'+i;
    });
    obj.children = item.children
   }
  menus.push(obj);
});
const navigate = useNavigate();
class Side extends React.Component {
  render() {
    function goPath(e){
      let keys = e.key.split('-');
      let route,cRoute;
      route = Routes[keys[0]];
      if(route.children){
        cRoute = route.children[keys[1]];
      }
      let path = route.path + (cRoute?'/'+cRoute.path:'');
      navigate(path);
    }
    return <div>
      <Menu
        defaultSelectedKeys={['0']}
        defaultOpenKeys={['1']}
        mode="inline"
        theme="dark"
        items={menus}
        onClick={goPath}
      />
    </div>;
  }
}
export default Side;

在这里插入图片描述

useNavigate应该放在一个react function component里，而不是一个class component里

side.js错误写法

import React from 'react';
import Routes from '../routes';
import { Menu } from 'antd';
import { useNavigate } from "react-router-dom";
let menus = [];
Routes.forEach((item,index)=>{
  let obj = {
    key:index,
    label:item.label,
  }
  if(item.children){ 
    item.children.forEach((citem,i)=>{
      citem.key=index+'-'+i;
    });
    obj.children = item.children
   }
  menus.push(obj);
});
class Side extends React.Component {
  render() {
    const navigate = useNavigate();
    function goPath(e){
      let keys = e.key.split('-');
      let route,cRoute;
      route = Routes[keys[0]];
      if(route.children){
        cRoute = route.children[keys[1]];
      }
      let path = route.path + (cRoute?'/'+cRoute.path:'');
      navigate(path);
    }
    return <div>
      <Menu
        defaultSelectedKeys={['0']}
        defaultOpenKeys={['1']}
        mode="inline"
        theme="dark"
        items={menus}
        onClick={goPath}
      />
    </div>;
  }
}
export default Side;

六、参考文档

react中文官网
reactrouter官网
antd官网

总结

踩坑路漫漫长@~@

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

uniapp瀑布流实现

uniapp瀑布流实现

1. 图片瀑布流&#xff1a; 不依赖任何插件&#xff0c;复制即可见效&#xff1a; <template><view class"page"><view class"left" ref"left"><image class"image" v-for"(item,i) in leftList" :k…
阅读更多...
使用Spring AOP做接口权限校验和日志记录

使用Spring AOP做接口权限校验和日志记录

文章目录 一、AOP 介绍1.1 AOP 应用场景1.2 AOP 中的注解 二、权限校验2.1 定义权限注解2.2 定义切面类2.3 权限验证服务2.4 织入切点2.5 测试 三、日志记录3.1 日志切面类3.2 异常统一处理 四、AOP 底层原理4.1 todo 一、AOP 介绍 AOP&#xff1a; 翻译为面向切面编程&#x…
阅读更多...
PMO和项目经理向老板提涨薪的成功秘籍有哪些？

PMO和项目经理向老板提涨薪的成功秘籍有哪些？

一、PMO和项目经理向老板提涨薪的必备准备 作为PMO和项目经理&#xff0c;在向老板提涨薪之前&#xff0c;首先需要做好充分的准备。这不仅包括对自身工作的全面梳理&#xff0c;还需对公司目标、业务需求和市场环境有深刻的理解。了解公司目标意味着要清晰地了解公司对项目管…
阅读更多...
ADC模数转换器

ADC模数转换器

1. ADC模数转换器 ADC: 模数转换器 : 将模拟量转换为数字量 的 硬件设备 DAC: 数模转换器 : 将数字量转换为模拟量 1.1 工作原理 ADC: 工作原理 主要用于测量电压 1. 逐次逼近型CMOS: 结构一般 成本一般 转换一般 稳定性较低 即对精度要求不高,转换位数一般 成本低…
阅读更多...
西瓜书学习笔记——层次聚类（公式推导+举例应用）

西瓜书学习笔记——层次聚类（公式推导+举例应用）

文章目录 算法介绍实验分析 算法介绍 层次聚类是一种将数据集划分为层次结构的聚类方法。它主要有两种策略&#xff1a;自底向上和自顶向下。 其中AGNES算法是一种自底向上聚类算法&#xff0c;用于将数据集划分为层次结构的聚类。算法的基本思想是从每个数据点开始&#xff0…
阅读更多...
vue+elmentUI解决前端页面时间显示为一串数字

vue+elmentUI解决前端页面时间显示为一串数字

在该属性上添加注解 JsonFormat(pattern "yyyy-MM-dd HH:mm:ss") private Date createTime; 导入包 import com.fasterxml.jackson.annotation.JsonFormat; 效果
阅读更多...
Python tkinter (12) —— Treeview控件

Python tkinter (12) —— Treeview控件

本文主要是Python tkinter Treeview控件介绍及使用简单示例。 tkinter系列文章 python tkinter窗口简单实现 Python tkinter (1) —— Label标签 Python tkinter (2) —— Button标签 Python tkinter (3) —— Entry标签 Python tkinter (4) —— Text控件 Python tkinte…
阅读更多...
【Docker Registry】docker 镜像仓库实战

【Docker Registry】docker 镜像仓库实战

Docker Registry 镜像仓库 (Docker Registry) 负责存储、管理和分发镜像&#xff0c;并且提供了登录认证能力&#xff0c;建立了仓库的索引。 镜像仓库管理多个 Repository&#xff0c; Repository 通过命名来区分。每个 Repository 包含一个或多个镜像&#xff0c;镜像通过镜…
阅读更多...
如何使用Python+Flask搭建本地Web站点并结合内网穿透公网访问？

如何使用Python+Flask搭建本地Web站点并结合内网穿透公网访问？

文章目录 前言1. 安装部署Flask并制作SayHello问答界面2. 安装Cpolar内网穿透3. 配置Flask的问答界面公网访问地址4. 公网远程访问Flask的问答界面 前言 Flask是一个Python编写的Web微框架&#xff0c;让我们可以使用Python语言快速实现一个网站或Web服务&#xff0c;本期教程…
阅读更多...
【Docker】docker安装jenkins

【Docker】docker安装jenkins

一、执行命令 下载jenkins镜像 #下载jenkins 镜像 docker pull jenkins/jenkins:latest-jdk8 启动jenkins容器 #启动jenkins 容器 #挂载 如果不挂载 每次启动jenkins的配置、插件、用户等信息都没有了 #jenkins_home 包含jenkins配置、插件、用户等信息。 要指定必须配置用…
阅读更多...
【日志框架】

【日志框架】

日志打印 建议用{}占位而不是字符串拼接打日志前先判断日志级别是否可用&#xff1a; 先根据等级过滤规则再决定写不写&#xff1b;先往一个管道写了内容&#xff0c;但再经等级过滤丢弃&#xff0c;徒增开销。 日志框架 Slf4J Slf4J 不是底层日志框架&#xff0c;只是门面…
阅读更多...
STL_list

STL_list

一、有关list的介绍 list是可以在常数范围内在任意位置进行插入和删除的序列式容器&#xff0c;并且该容器可以前后双向迭代list的底层是双向链表结构&#xff0c;双向链表中每个元素存储在互不相关的独立节点中&#xff0c;在节点中通过指针指向其前一个元素和后一个元素。Ii…
阅读更多...
elasticsearch8.x版本docker部署说明和集成springboot

elasticsearch8.x版本docker部署说明和集成springboot

前提&#xff0c;当前部署没有涉及证书和https访问 1、环境说明,我采用三个节点&#xff0c;每个节点启动两个es&#xff0c;用端口区分 主机角色ip和端口服务器Amaster192.168.2.223:9200服务器Adata192.168.2.223:9201服务器Bdata,master192.168.2.224:9200服务器Bdata192.1…
阅读更多...
Nodejs基础5之网络基础概念的IP、端口，HTTP模块的创建HTTP服务、HTTP服务注意事项、浏览器查看HTTP报文

Nodejs基础5之网络基础概念的IP、端口，HTTP模块的创建HTTP服务、HTTP服务注意事项、浏览器查看HTTP报文

Nodejs基础 网络基础概念IPIP的介绍IP的作用IP的分类共享IP-公网家庭共享——局域网公网 本地回环IP地址总结 IP标准分类 端口端口举例端口介绍总结 HTTP模块创建HTTP服务HTTP服务注意事项浏览器查看HTTP报文查看请求报文查看请求体url当中的查询字符串查看响应报文 网络基础概…
阅读更多...
Qt开源版 vs 商业版 详细比较！！！！

Qt开源版 vs 商业版 详细比较！！！！

简单整理Qt开源版与商业版有哪些差别&#xff0c;仅供参考。 简单对比 开源版商业版许可证大部分采用对商业使用不友好的LGPLv3具备商业许可证保护代码专有许可证相关大部分模块使用LGPLv3和部分模块使用GPL组成仅第三方开源组件使用Qt的其他许可证Qt模块功能支持支持技术支持…
阅读更多...
Java把列表数据导出为PDF文件，同时加上PDF水印

Java把列表数据导出为PDF文件，同时加上PDF水印

一、实现效果 二、遇到的问题 实现导出PDF主体代码参考&#xff1a;Java纯代码实现导出PDF功能&#xff0c;下图是原作者实现的效果 导出报错Font STSong-Light with UniGB-UCS2-H is not recognized.。参考&#xff1a;itext 生成 PDF(五) 使用外部字体 网上都是说jar包的版本…
阅读更多...
翻译: GPT-4 Vision通过量身定制的推荐来增强应用的用户体验 升级Streamlit五

翻译: GPT-4 Vision通过量身定制的推荐来增强应用的用户体验 升级Streamlit五

GPT-4 Vision 系列: 翻译: GPT-4 with Vision 升级 Streamlit 应用程序的 7 种方式一翻译: GPT-4 with Vision 升级 Streamlit 应用程序的 7 种方式二翻译: GPT-4 Vision静态图表转换为动态数据可视化 升级Streamlit 三翻译: GPT-4 Vision从图像转换为完全可编辑的表格 升级St…
阅读更多...
SpringBoot使用OpenCV

SpringBoot使用OpenCV

SpringBoot使用OpenCV Spring boot 整合 OpenCV 4.5环境安装配置spring boot项目 OpenCV 训练自己的模型&#xff0c;实现特定物体的识别环境安装前期准备总结 Spring boot 整合 OpenCV 4.5 本文展示Windows下Spring Boot 整合Opencv 4.5 进行对图片中的人脸提取&#xff0c;开…
阅读更多...
防火墙到防火墙的高可用知识汇总

防火墙到防火墙的高可用知识汇总

目录​​​​​​​ 防火墙 防火墙的分类&#xff1a; 防火墙的发展史 传统防火墙&#xff08;包过滤防火墙&#xff09;—— 一个严格的规则表 传统防火墙&#xff08;应用代理防火墙&#xff09;—— 每个应用添加代理 传统防火墙&#xff08;状态检测防火墙&#xff09…
阅读更多...
责任链模式在java中的实现

责任链模式在java中的实现

1 总览 2 概念 避免请求发送者与接收者耦合在一起&#xff0c;让多个对象都有可能接收请求&#xff0c;将这些对象连接成一条链&#xff0c;并且沿着这条链传递请求&#xff0c;直到有对象处理它为止。职责链模式是一种对象行为型模式。 3 实现 公共部分&#xff0c;一个系…
阅读更多...
最新文章

Copyright @ 2022~2023