react+antd从头搭建管理台(一)项目初始化

1、首先创建各个组件src-pages-admin-dashboard下的index.js和products下的Edit.js和List.js均为组件

2、配置路由

在src-index.js中配置路由信息

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
//一下为路由的相关组件
import { HashRouter as Router, Switch, Route, Redirect } from 'react-router-dom';
import { mainRoutes } from './routes';
import { Provider } from 'react-redux';
import store from './store'
import Login from './pages/Login';
import Edit from './pages/admin/products/Edit';

ReactDOM.render(

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


reportWebVitals();

对以上配置方法使用路由文件进行改进

在src下新建routes文件

在routes文件下新建index.js

路由分为2类

1类 mainRoutes：登录、404等

2类 adminRoutes：需要验证之后才能访问的管理后台页面

import List from "../pages/admin/products/List";
import Edit from "../pages/admin/products/Edit";
import Login from "../pages/Login";
import Index from "../pages/admin/dashboard/index";
import Notice from "../pages/admin/notice/Index";
import PageNotFound from "../pages/PageNotFound";
import {HomeOutlined,SmileOutlined} from '@ant-design/icons';
//路由配置文件
export const mainRoutes = [{
    path:'/login',
    component: Login
},{
    path:'/404',
    component:  PageNotFound
}];

export const adminRoutes = [{
    path:'/admin/dashboard',
    component: Index,
    isShow:true,
    titile:"看板",
    icon: <HomeOutlined />
},
{
    path:'/admin/products',
    component: List,
    //全匹配路径
    exact : true,
    isShow:true,
    titile:"列表",
    icon:<SmileOutlined />
},
{
    path:'/admin/products/edit/:id?',
    component: Edit,
    isShow:false
    // exact : true,
    // strict:true
},
{
    path:'/admin/notice',
    component: Notice,
    isShow:false
    // exact : true,
    // strict:true
}];

src-index.js

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

ReactDOM.render(
  <Provider store={store}>
    <Router>
      <Switch>

        {/**
 * 以下是简化的部分
 */}
        {mainRoutes.map(route => {
          return <Route key={route.path} path={route.path} component={route.component} />;
        })}

      </Switch>

    </Router>
  </Provider>
  ,
  document.getElementById('root')
);

reportWebVitals();

再将mainroutes循环简化

{mainRoutes.map(route => {
          return <Route key={route.path} path={route.path} component={route.component} />;
        })}

简化为

{mainRoutes.map(route => {
          return <Route key={route.path} {...route} />;
        })}

这时候login有效果，但404没有效果（为什么，我也不知道）

访问不到的页面重定向到404

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

ReactDOM.render(
  <Provider store={store}>
    <Router>
      <Switch>
        {/**
 * 以下是简化的部分
 */}
        {mainRoutes.map(route => {
          return <Route key={route.path} {...route} />;
        })}
        <Redirect to="/404"></Redirect>

      </Switch>

    </Router>
  </Provider>
  ,
  document.getElementById('root')
);

reportWebVitals();

优化：

当访问/admin路径时候都走APP组件

<Route path="/admin" render={routeProps => <App {...routeProps} />}></Route>

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

ReactDOM.render(
  <Provider store={store}>
    <Router>
      <Switch>
{/**访问/admin路径的都走App组件
         */}
        <Route path="/admin" render={routeProps => <App {...routeProps} />}></Route>
        {mainRoutes.map(route => {
          return <Route key={route.path} {...route} />;
        })}
        <Redirect to="/404"></Redirect>
      </Switch>
    </Router>
  </Provider>
  ,
  document.getElementById('root')
);

reportWebVitals();

App组件的改造

1、先在App.js里面引入路由组件

import {Switch,Route,Redirect} from 'react-router-dom';

2、循环管理后台的路由

引入路由

import { adminRoutes } from './routes'

循环路由

<div className="App">
      <Switch>
        {
          adminRoutes.map(route=>{
            return
            <Route key={route.path} path={route.path} exact={route.exact} >
            </Route>
          })
        }
      </Switch>
    </div>

渲染路由 render

render={routeProps=>{
              return <route.component {...routeProps}></route.component>
            }}

App.js最终内容如下

import './App.css';
import 'antd/dist/antd.css';
import { Switch, Route, Redirect } from 'react-router-dom'
import { adminRoutes } from './routes'
import Frame from './components/Frame/Index';
import './App.css'
import { isLogined } from './utils/auth'
function App() {
  return (isLogined() ?
    <Frame className="App">

      <Switch>
        {
          adminRoutes.map(route => {
            return (
              <Route
                key={route.path}
                path={route.path}
                exact={route.exact}
                render={routeProps => {
                  return <route.component{...routeProps} />;
                }}
              />
            );
          })
        }
        <Redirect to={adminRoutes[0].path} from="/admin"></Redirect>
        <Redirect to="/404"></Redirect>
      </Switch>

    </Frame> : <Redirect to='/login' />
  );
}

export default App;

这样每个组件在访问时候都嵌套在了app组件里面

同样需要配置访问不到 404，在switch组件里面配置

        <Redirect to="/404"></Redirect>

如果要新配路由，在routes的index.js里面配置就好

布局

新建一个Frame组件(在antd里面找一个，将props传入该组件，将content替换成props.children这样就能显示内容组件了)然后替代app.js里面的div

路由和二级菜单关联配置

路由配置文件里面routes里面index.js

是否展示isShow titile

{
    path:'/admin/products',
    component: List,
    //全匹配路径
    exact : true,
    isShow:true,
    titile:"列表",
    icon:<SmileOutlined />
}

再修改app.js框架组件components-Frame-index.js

在组件里面使用路由需要引入

import {withRouter} from 'react-router-dom';

并在组件结尾套进组件

export default withRouter(Index)

1、引入路由

import { adminRoutes } from '../../routes';

2、过滤路由

const routes = adminRoutes.filter(route=>route.isShow)

3、在<Menu>组件里面写一个循环

<Menu>
{routes.map(route=>{
return <Menu.Item key={route.path}>{route.title} </Menu.Item>
})}
</Menu>

这样框架的左边菜单就会显示你配的路由名称

4、跳转

在menuitem里面添加onclick跳转

<Menu.Item key={route.path} onClick={p=>props.history.push(p.key)}>

 源码地址 

https://github.com/gogocomeon/stu-shop-manager