2023年6月29日发(作者：)

React+React-Redux+React-Router+Antd搭建单页管理应⽤模板⽬录前⾔本⽂主要使⽤React全家桶⼀步步搭建单页管理应⽤，阅读本⽂需要React、React-Redux、React-Router 基础知识，使⽤react 脚⼿架create-react-app 创建项⽬提⽰：以下是本篇⽂章正⽂内容，下⾯案例可供参考，如有问题，欢迎指正。⼀、实现效果环境windows10 + node⼆、搭建步骤1.创建项⽬在cmd窗⼝中执⾏：#

安装 create-react-app ( react脚⼿架，已安装，请忽略)npm i create-react-app -g#

创建项⽬npx create-react-app day7-react-cli 项⽬⽬录如下：⽬录说明：│ .gitignore # git

忽略⽂件│ #

项⽬说明⽂件，定义项⽬依赖、描述等信息│ #

项⽬说明⽂档│ # yarn

版本锁定⽂件├─ public #

静态资源⽂件夹，该⽂件夹下的⽂件不会被打包处理，直接复制│ #

浏览器标签栏图标│ #

项⽬唯⼀html

⼊⼝模板⽂件 react root元素│ │ │ # pwa

⽂件│ #

⾃定义爬⾍⽂件└─ src # App

组件的样式 # App组件 # App组件测试⽰例⽂件 #

项⽬⼊⼝

⽂件的样式 #

项⽬⼊⼝⽂件

2.运⾏项⽬执⾏命令：#

进⼊项⽬⽬录cd day7-react-cli

#

安装依赖（我这边使⽤的是yarn，如果⽤npm: npm i

即可）yarn#

运⾏项⽬（npm run start）yarn start控制台看见如下就代表运⾏成功：会⾃动打开浏览器窗⼝，展⽰如下：三、项⽬改造1.添加redux-router、redux-router、axios、antd依赖#

状态管理库yarn add react-redux -S#

适⽤于浏览器的路由yarn add react-router-dom -S# ajax请求库yarn add axios -S# ui

组件库yarn add antd -S2.修改后⽬录，及主要修改⽂件│ .gitignore

│

│ LICENSE│

│

│

├─ public│

│

│

│

│ │

└─ src │ │ │ │ │ │ │ │ ├─ assets #

静态资源⽂件夹 │ └─images │ ├─ layout #

页⾯主体布局，展⽰左侧菜单及头部 │ │ │ │ │ └─ components │ │ #

页⾯⼆级路由 │ │ #

头部，logo

头像等 │ │ #

左侧菜单 │ └─css │ │ │ ├─ redux #

状态管理store

和各action │ │ │ ├─ action │ │ │ └─ reducer │ ├─ route │ #

页⾯⼀级路由 └─ views #

页⾯各组件 ├─ home │ ├─ login #

登录页，我这边讲 UI

和 reducer

分开了，实际可以合并在⼀起 │ │ │ └─ui │ │ ├─ page1 │ └─ page2 主要⽂件代码：：import React from "react";import ReactDOM from "react-dom";import "./";import App from "./App";import { Provider } from "react-redux";import store from "redux/redux";// Provider

为⾃组件提供store对象( , mentById("root"));:import "./";import MainRouter from "route/main-router";const App = () => ;export default App;：import { Component } from "react";//

这⾥引如 BrowserRouter

适合浏览器的路由实现import { BrowserRouter as Router, Route, Switch, Redirect,} from "react-router-dom";import "layout/";import Login from "views/login/login";import AppMain from "layout/app-main";export default class MainRouter extends Component { //

此处渲染

第⼀层路由 render() { return ( ); }}/src/layout/:这⾥使⽤antd 布局，完成管理页⾯经典布局，实际MainContent 可以直接把代码拿到这边写，我这边拆开不影响由于app-main 组件为 react-router 直接渲染的组件，所以他的props中有history对象，可以⽤作菜单跳转，我们这⾥可以传⼀个跳转菜单的⽅法到 SiderMenu 组件中⽤作点击左侧菜单跳转页⾯，这种⽅法有点⿇烦，我这边直接⽤了⾼阶组件 withRuter,被他包裹的组件的props可以拥有history，⽤它完成路由跳转import React, { Component } from "react";import { Layout } from "antd";import SiderMenu from "layout/components/sider";import MainContent from "layout/components/content";import HeaderWrapper from "layout/components/header";const { Header, Sider, Content } = Layout;/** *

页⾯的主要架构，考虑是否需要添加登陆判断 */export default class AppMain extends Component { render() { return (

); }}/src/components/:import { Component } from "react";import { Menu } from "antd";import { AppstoreOutlined, MailOutlined } from "@ant-design/icons";import { withRouter } from "react-router-dom";import "./css/";const { SubMenu } = Menu;const menus = { home: [], menu1: ["page1", "page2"], menu2: ["page3", "page4", "page5", "page6", "page8"], menu3: ["page9", "page10", "page11", "page12"],};class SiderMenu extends Component { state = { openKeys: [], activeKeys: [], }; componentDidMount() { let { pathname } = on; const key = ("/")[2] || "home"; nKeys(key); te({ activeKeys: [key], }); } setOpenKeys = (key) => { for (let tmp in menus) { let menu = menus[tmp]; if (es(key)) { if (es(key)) { te({ openKeys: [tmp], }); break; } else { te({ openKeys: [], }); } } }; handleOpenChange = (openKeys) => { if ( === 0) { te({ openKeys: [], }); } else { te({ openKeys: [openKeys[ - 1]], }); } }; handleMenuClick = ({ key }) => { nKeys(key); te({ activeKeys: [key], }); //

被包裹组件，因为他不是Router

直接渲染的组件，如果不包裹它没有history (`/app/${key}`); }; render() { return (

< key="home">⾸页 } title="测试1"> < key="page1">菜单 1 < key="page2">菜单 2 } title="测试2"> < key="page5">菜单 5 < key="page6">菜单 6 < key="page7">菜单 7 < key="page8">菜单 8 } title="测试3"> < key="page9">菜单 page9 < key="page10">菜单 page10 < key="page11">菜单 page11 < key="page12">菜单 page12 ); }}//

这边返回包裹后的组件//

这边返回包裹后的组件export default withRouter(SiderMenu);注意下，在项⽬根⽬录⾥⾯添加了⼀个 ⽤作配置代理服务器地址规则，前后端分离的项⽬，如果后端不允许跨域，需要我们⾃⼰⽤代理来完成ajax请求：//

如下配置会将请求本地地址3000/student/*

代理到5000const createProxyMiddleware = require("http-proxy-middleware");s = function (app) { ( "/student", createProxyMiddleware({ target: "localhost:5000", changeOrigin: true, pathRewrite: { "^/student": "", }, }) );//

如下配置会将请求本地地址3000/person/*

代理到6000 ( "/person", createProxyMiddleware({ target: "localhost:6000", changeOrigin: true, pathRewrite: { "^/person": "", }, }) );};请求的地⽅：//

这边可以直接填本地的地址，("/student/login").then((res) => { erInfo({ ..., }); ("/app/home"); });总结