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

已于 2024-01-26 16:39:42 修改
阅读量1k 收藏 4
点赞数 6
文章标签： react.js javascript ecmascript
于 2024-01-26 16:09:20 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_44434938/article/details/135867063
版权

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

文章目录

前言

需求：新建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官网

总结

踩坑路漫漫长@~@

longlongago~~
关注
react-router-dom路由配置
读心悦
05-17 879
react-router-dom 是 React 的官方路由库，用于在 React 应用程序中实现单页面应用（SPA）的路由管理。下面是一个基本的 react-router-dom 路由配置示例：首先，确保你已经安装了 react-router-dom。
React 按需引入antd组件和样式
人无远虑,必有近忧.
04-17 1236
文章目录1. 下载相关依赖1.1 添加antd1.2 引入antd的 antd.css（不需要执行，后面会删除，仅了解）2. 添加按需打包工具2.1 添加依赖配置文件react-app-rewired 用于启动脚手架customize-cra 执行修改配置命令babel-plugin-import 按需引入组件和样式的babel插件2.2 修改package.json配置文件2.3 在src目录的同级目录创建 config-overrides.js2.4 删除之前引入的 antd.css引入 1. 下载相关
react + react-router v6 + antd5实现动态路由和动态菜单
m0_59281691的博客
04-17 7809
以上就是我对动态路由和动态菜单的实现，如果还有更好的方式也欢迎大家一起分享交流，学习学习。
react项目中引入antd
qq_42672798的博客
08-19 2772
1、安装antd npm install antd --save 2、安装（react-app-rewired）一个对 create-react-app 进行自定义配置的社区解决方案 yarn add react-app-rewired / cnpm install react-app-rewired --save 3、修改 package.json react-scripts 需改为react-app-rewired "scripts": { "start": "react-app-rewired
react路由使用方法
最新发布
weixin_46560512的博客
05-05 945
react路由常用方法 一、router安装与基础路由 二、路由跳转 三、路由参数 四、路由嵌套
在react项目中引入antd
宫崎骏爷爷的捣蛋野孩子
10-08 6651
在react项目中引入antd 一、antd官网地址 https://ant.design/docs/react/introduce 二、引进antd（直接引入） 1、安装antd npm install antd --save / yarn add antd / cnpm install antd --save 2、在react项目的css文件中引入 Antd的css @import 'antd/dist/antd.css'; 3、看文档使用： 如使用Button： 1、在对应
React之使用antd组件
学习笔记
09-04 2514
进入网页点击组件就可以看到网页需要的各种配件，如按钮、导航栏等等，并且配有各种使用方法的API，目前已经更新到4.22版本，原本是只支持react不过后来也支持vue了。antd 是基于 Ant Design 设计体系的 React UI 组件库，主要用于研发企业级中后台产品。antd还可以更改主题颜色，按需引入组件的css，不过得小小操作一下，以后需要了再来补。进入组件选一个比较好看的组件，比如我觉得这个导航栏不错。然后选择js的代码，copy到App组件就行了。终于，ul设置一下就可以了。
webpack+react新建项目—— 使用react-router-dom和antd
weixin_54012475的博客
02-24 646
安装react-router-dom npm install react-router-dom 修改app.tsx组件 import React, { useState } from "react"; import { BrowserRouter, Route, Link, Routes } from "react-router-dom" interface IProps { title: string } const About = () => { return &lt
react_antd:react，react-router-dom @ 4.0，react-redux，antd
05-06
react@16.11.0、redux@4.0.4、react-router-dom@5.1.2, 这是一个react + antd的后台管理系统模版框架,具有响应式动态路由（可根据后台服务器提供列表或者登录验证身份进行修改Menu菜单）。 具备列表表单的增删改查、...
基于React Typescript Antd Redux React-Router-Dom的团购项目设计源码
02-19
这个团购项目的设计源码体现了现代前端开发的最佳实践，它结合了React的高效UI构建能力、TypeScript的类型安全、Ant Design的美观组件、Redux的状态管理和React Router DOM的灵活路由管理。通过这些技术的组合，...
react路由的使用 react-router-dom 、二级路由的样式丢失问题、路由传参
weixin_44437816的博客
06-28 979
react路由的使用 react-router-dom 、二级路由的样式丢失问题、路由传参
管理系统系列--一個简洁的 antd-react-admin 应用 -- React + Antd 后台管理系统 .zip
02-26
【标题】中的“antd-react-admin...总的来说，这个项目涉及到了React的全栈开发流程，包括前端UI设计、数据处理、路由控制以及测试和部署等多个环节，对于想要深入学习React和Antd的开发者来说，是一个很好的实践平台。
React引入Antd组件
weixin_34367845的博客
05-28 1449
2019独角兽企业重金招聘Python工程师标准>>> ...
antd 页面跳转_在React中使用react-router-dom路由
weixin_39847099的博客
12-23 1111
在React中使用react-router-dom路由使用React构建的单页面应用，要想实现页面间的跳转，首先想到的就是使用路由。在React中，常用的有两个包可以实现这个需求，那就是react-router和react-router-dom。本文主要针对react-router-dom进行说明。安装首先进入项目目录，使用npm安装react-router-dom：npm install rea...
react 按需引入 antd
hbinn_0的博客
11-13 359
npm install antd --save 引入 react-app-rewired 并修改 package.json 里的启动配置npm install react-app-rewired customize-cra --save-dev 将package.json 的 "scripts" 修改为"scripts": { "start": "react-app-rewired start", "build": "react-app-rewired build", ...
antd + react model自定义footer_React系列（一）项目搭建
weixin_39574868的博客
10-27 319
1.使用create-react-app创建一个基于typescript的项目$npxcreate-react-appmyApp--typescript2.进入项目并启动$cdmyApp$npmstart3.引入 antd$npminstallantd--saveindex.css文件中引入样式，组件按需引入即可import'antd/dist/antd.css...
react按需导入antd
wenyeqv的博客
10-10 1280
react中比较出名的组件库之一就是ant design，对于初学者，只需要npm下载ant组件库，然后分别导入相应的组件，引入样式即可使用。但是这种方式并不是很好，因为我们使用的组件是有限的，但是却引入了所有的antd样式，造成了性能的浪费，因此我们需要按需引入相应的组件。 这里纪录一下，如何不用webpack，只在原有的create-react-app创建的目录下面，按需引入antd组件 第一步肯定需要安装antd对应的组件库，这里不做过多描述 安装相应的插件，用来覆盖create-react.
React中使用antd
qq_46026593的博客
04-22 513
Ant Design官网。
React中使用Antd组件
2401_84094029的博客
04-07 774
代码能力一定要注重，尤其是很多原理性的代码（之前两次让我写过Node中间件，Promise.all，双向绑定原理，被虐的怀疑人生）！尽量从面试官的问题中表现自己知识的深度与广度，让面试官发现你的闪光点！style: true, //一定要把style变成true!一定不要死记硬背，要理解原理，否则面试官一深入就会露馅！我是antd的按钮哦。我是antd的按钮哦。Antd的自定义主题。theme.js文件。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值