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

点击实现路由跳转

• 修改key值

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

• 使用hook跳转

import {useNavigate} from 'react-router-dom'

  const navigate = useNavigate()

// 修改handleClick

  const handleClick = e => {
    navigate('/'+e.key)
  };

  // 默认路由
  defaultSelectedKeys={['list']}

• 实现效果

遇到的bug

刷新之后路径并未改变，菜单栏改变了。

• 片段代码

引入useLocation

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)
  };

• 实现效果图（自己刷新试试咯）

面包屑

传送门

ant.design/components/…

• 创建Bread组件

初始化书写Bread组件

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;

在App组件中引入一个Bread组件

import Bread from './components/Bread'


<div className='container_box'>
    <Bread/>
      <Outlet/>   
</div>

• 根据路径更新面包屑

更新面包屑名字（useEffect取过来，useState再赋值更新上）

// 引入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])

内容补充（表单，表格）

• 创建2个路由组件

• 配置路由（index.jsx）

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>

• 实现效果

ListTable 书写样式

• 在APP组件中设置布局属性

<div className='container_box'>
    <Bread/>
      <Outlet/>   
</div>

base.less

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

• 创建less文件

.list_table{
    width: 100%;
    background: #fff;
    height: 100%;
 
}

• 引入less样式到ListTable

import './less/ListTable.less'

// 不要忘记添加类名
<div className='list_table'>ListTable</div>

• 实现效果图