《CMS后台系统》项目实战 详细分解（六）

<Menu.Item key="list"><ReadOutlined /> 查看文章列表</Menu.Item>
      <Menu.Item key="edit"><EditOutlined /> 文章编辑</Menu.Item>
      <Menu.Item key="means"><DatabaseOutlined /> 修改资料</Menu.Item>
复制代码

import {useNavigate} from 'react-router-dom'
  const navigate = useNavigate()
复制代码

// 修改handleClick
  const handleClick = e => {
    navigate('/'+e.key)
  };
复制代码

// 默认路由
  defaultSelectedKeys={['list']}
复制代码

import React, { useEffect, useState } from 'react'
import {useNavigate, useLocation} from 'react-router-dom'
const location = useLocation()
const [defaultKey, setDefaultKey] = useState('')
// 一旦渲染立刻获取动态的路由路径，不在使用默认的
  useEffect(() => {
      let path = location.pathname;
      let key = path.split('/')[1];
      setDefaultKey(key)
  }, []);
  // 及时更新路由路径
    const handleClick = e => {
    navigate('/'+e.key)
    setDefaultKey(e.key)
  };
复制代码

import React from 'react';
import { Breadcrumb } from 'antd';
import { HomeOutlined } from '@ant-design/icons';
const Bread = () => {
    return (
        <Breadcrumb>
        <Breadcrumb.Item href="">
          <HomeOutlined />
        </Breadcrumb.Item>
        <Breadcrumb.Item>Application</Breadcrumb.Item>
      </Breadcrumb>
    );
}
export default Bread;
复制代码

import Bread from './components/Bread'
<div className='container_box'>
    <Bread/>
      <Outlet/>   
</div>
复制代码

// 引入hook
import React, {useState,useEffect} from 'react';
// 设置变量
const [breadName, setBreadName] = useState('')
// 获取路径
const {pathname} = useLocation()
// 不是在组件mounted时去获取路径，而是路径一旦变化，就要获取对应的路径名称，并且修改breadName
// 监听路由的路径(/list /edit /means)
useEffect(() => {
    switch (pathname) {
        case "/list":
            setBreadName('查看文章列表');
            break;
        case "/edit":
            setBreadName('文章编辑');
            break;
        case "/means":
            setBreadName('修改资料');
            break;
        default:
            break;
    }
}, [pathname])
复制代码

import ListTable from '../pages/ListTable'
import ListList from '../pages/ListList'
const BaseRouter = () => (
    <Router>
        <Routes>
            <Route path='/' element={<App />}>
                <Route path='/listtable' element={<ListTable />}></Route>
                <Route path='/listlist' element={<ListList />}></Route>
                <Route path='/edit' element={<Edit />}></Route>
                <Route path='/means' element={<Means />}> </Route>
            </Route>
            <Route path='/login' element={<Login />}> </Route>
            <Route path='/register' element={<Register />}> </Route>
        </Routes>
    </Router>
)
复制代码

useEffect(() => {
        switch (pathname) {
            case "/listlist":
                setBreadName('查看文章列表List');
                break;
            case "/listtable":
                setBreadName('查看文章列表Table');
                break;
            case "/edit":
                setBreadName('文章编辑');
                break;
            case "/means":
                setBreadName('修改资料');
                break;
            default:
                setBreadName(pathname.includes('edit') ? '文章编辑' : "");
                break;
        }
    }, [pathname])
复制代码

<Menu.Item key="listlist"><ReadOutlined /> 查看文章列表List</Menu.Item>
            <Menu.Item key="listtable"><ReadOutlined /> 查看文章列表Table</Menu.Item>
复制代码

<div className='container_box'>
    <Bread/>
      <Outlet/>   
</div>
复制代码

.container .container_box {
  flex: 1;
  box-sizing: border-box;
  padding: 20px;
  display: flex;
  flex-direction: column;
}
复制代码

.list_table{
    width: 100%;
    background: #fff;
    height: 100%;
}
复制代码

import './less/ListTable.less'
// 不要忘记添加类名
<div className='list_table'>ListTable</div>
复制代码