React 后台管理系统路由搭建2.0

src > index.js 入口配置Router，否则页面不知道往哪跳

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import Router from './router'

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

src > router.js 根组件需要接纳登录页面、主页面、详情页面

import React from 'react'
import { HashRouter, Route, Switch } from 'react-router-dom'
import App from './App'
import Login from './pages/login'
import Admin from './admin'
import Buttons from './pages/ui/buttons'
import Gallery from './pages/ui/gallery'
import MyCarousel from './pages/ui/carousel'
import NoMatch from './pages/nomatch'


export default function Router() {
  return (
    <HashRouter>
      <App>
        <Route path="/login" component={Login} />
        <Route path="/admin"
          render={() =>
            <Admin>
              <Switch>
                {/* switch——匹配到一个就不会再向下执行了 */}
                <Route path="/admin/ui/buttons" component={Buttons} />
                <Route path="/admin/ui/gallery" component={Gallery} />
                <Route path="/admin/ui/Carousel" component={MyCarousel} />
                <Route component={NoMatch} />
              </Switch>
            </Admin>} />
      </App>
    </HashRouter>
  )
}

src > App.js 用于存放子组件

import React from 'react'
import './App.css' //App.css内容为: @import '~antd/dist/antd.css';

export default function App(props) {
  return (
    <div>
      {* router.js中App组件嵌套的的子组件 *}
      {props.children}
    </div>
  )
}

src > Admin.js 主页面

import React from 'react'
import { Row, Col } from 'antd';
import Header from './components/header';
import Footer from './components/footer';
import NavLeft from './components/navLeft';
import './style/common.less'

export default function Admin(props) {
  return (
    <Row className="container">
      <Col span={4} className="nav-left">
        <NavLeft />
      </Col>
      <Col span={20} className="main">
        <Header />
        <Row className="content">
          {* router.js中Admin组件嵌套的的子组件 *}
          {props.children}
        </Row>
        <Footer />
      </Col>
    </Row>
  )
}

src > components > navLeft > index.js 左侧导航栏

import React, { useState, useEffect } from 'react'
import { Menu } from 'antd';
import menuList from '../../config/menuConfig';
import { NavLink } from 'react-router-dom'
import './index.less'
const { SubMenu } = Menu;

export default function NavLeft() {

  const [menuTree, setMenuTree] = useState([])

  useEffect(() => {
    setMenuTree(menuList)
  }, [])

  const renderMenu = (data) => {
    return data.map((item) => {
      if (item.children) {
        return (
          <SubMenu title={item.title} key={item.key}>
            {renderMenu(item.children)}
          </SubMenu>
        )
      }
      return <Menu.Item key={item.key}>
        <NavLink to={item.key}>
          {item.title}
        </NavLink>
      </Menu.Item>
    })
  }

  return (
    <div>
      <div className="logo">
        <img src="/assets/logo-ant.svg" alt="" />
        <h1>logo place</h1>
      </div>
      <Menu theme="dark" >
        {renderMenu(menuTree)}
      </Menu>
    </div>
  )
}