react+antd后台管理-01

环境创建

• 创建项目
  npm create-react-app 项目名称
yarn create react-app 项目名称

• 安装antd
  npm install antd

• 安装路由
  npm install react-router-dom

• 启动
  npm start

测试antd安装坏境

• 引入antd.css
  import 'antd/dist/antd.css
• 按需引入antd组件
  import {Button} from 'antd';
• 使用antd组件检测
  <Button type="primary">测试</Button>

搭建目录结构

• 创建pages存放页面

Login.js 登录页面
admin 用户文件夹

dashboard

index.js 看板

products 商品管理文件夹

List.js 列表页面
Edit.js 修改页面

• 创建components存放组件
• ES7 React/Redux… vscode插件推荐（rfce快速生成结构）

配置路由（测试）

• 引入使用路由配置（这里采用hash模式）
  import {HashRouter as Router,Switch,Route} from 'react-router-dom'
• 引入使用组件
  import Login from './page/Login'
import List from './page/admin/products/List'
• 使用组件，构成路由`

ReactDOM.render(
  <Router>
    <Switch>
      <Route path="/login" component={Login}/>
      <Route path="/admin/products" component={List}/>
    </Switch>
  </Router>,
  document.getElementById('root')
);

路由配置优化

• 在src文件夹下面新建routes文件夹-新建index.js文件书写路由，路由分2类，一类为不需要admin的登录和404，一类是admin

import Index from "../page/admin/dashboard/Index"
import Login from "../page/Login";
import List from "../page/admin/products/List"
import Edit from "../page/admin/products/Edit"
import PageNotFound from "../page/PageNotFound"; 
export const mainRoutes=[{
    path:"/login",
    component:Login
},{
    path:"/404",
    component:PageNotFound
}]
export const adminRoutes=[{
    path:"/admin/dashboard",
    component:Index
},{
    path:"/admin/products",
    component:List,
    exact:true
},{
    path:"/admin/products/edit/:id",
    component:Edit
}]

• 跟文件index.js中配置一下路由（主要是非admin路由）

import React from 'react';
import ReactDOM from 'react-dom';
import {HashRouter as Router,Switch,Route,Redirect} from 'react-router-dom'
import {mainRoutes} from "./routes/index"
import App from "./App"
import './index.css';
import reportWebVitals from './reportWebVitals';

ReactDOM.render(
  <Router>
    <Switch>
      <Route path="/admin" render={routeProps=><App {...routeProps}/>}></Route>
      {
        mainRoutes.map(route=>{
          return <Route key={route.path} {...route} />
        })
      }
      <Redirect to="/404" /> 
    </Switch>
  </Router>,
  document.getElementById('root')
);
reportWebVitals();

• 在跟文件App.js中配置路由（主要针对admin）

import React from 'react';
import {Switch,Route,Redirect} from "react-router-dom"
import {adminRoutes} from "./routes/index"
import 'antd/dist/antd.css'
import './App.css';

function App() {
  return (
    <div className="App">
      <h1>这是一个App组件</h1>
      <Switch>
        {
          adminRoutes.map(route=>{
            return (
              <Route 
                key={route.path} path={route.path} exact={route.exact} 
                render={
                  routeProps=>{
                    return <route.component {...routeProps} />
                  }
                }
              />
            )
          })
        }
        <Redirect to="/404" /> 
      </Switch>
    </div>
  );
}

export default App;