从零开始搭建后台--路由与样式

起因

越来越感觉 Antd Pro 太难用了，改个菜单，改个颜色，改个配置找半天，从 2.x 一直用到 5.0，升一级基本就重新来一篇，我实在是跟不动了,我需要一款可以自由组合的后台，摆脱框架的条条框框。

创建工程

npx create-react-app my-app
cd my-app
# 安装依赖
npm install -save 

使用路由

npm install --save react-router react-router-config
npm install react-router-dom

使用Less

  npm install less less-loader --save-dev
  # 根据以下方案配置 less 
  # https://juejin.cn/post/6844903761484185613

入口文件index.js，测试路由跳转

import React from 'react';
import ReactDOM from 'react-dom';
import reportWebVitals from './reportWebVitals';
import { BrowserRouter, Link } from 'react-router-dom';
import { renderRoutes } from "react-router-config";

// 自定义全局样式
import './index.less';

const Root = ({ route }) => (
   <div>
   	<h1>Root</h1>
   	{/* child routes won't render without this */}
   	{renderRoutes(route.routes)}
   </div>
);

const Home = ({ route }) => (
   <div>
   	<h2>Home</h2>
   	<Link to="/child/1">adf</Link>
   </div>
);

const Child = ({ route }) => (
   <div>
   	<h2>Child</h2>
   	{/* child routes won't render without this */}
   	{renderRoutes(route.routes, { someProp: "these extra props are optional" })}
   </div>
);

const GrandChild = ({ someProp }) => (
   <div>
   	<h3>Grand Child</h3>
   	<div>{someProp}</div>
   </div>
);


const routes = [
   {
   	component: Root,
   	routes: [
   		{
   			path: "/",
   			exact: true,
   			component: Home
   		},
   		{
   			path: "/child/:id",
   			component: Child,
   			routes: [
   				{
   					path: "/child/:id/grand-child",
   					component: GrandChild
   				}
   			]
   		}
   	]
   }
];

ReactDOM.render(
   <BrowserRouter>
   	{/* kick it all off with the root route */}
   	{renderRoutes(routes)}
   </BrowserRouter>,
   document.getElementById('root')
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();