后台——侧边和面包屑导航栏设计与实现方案

一、功能描述

后台管理系统最重要的功能之一无疑是导航的设计，不管是侧边导航栏还是头部面包屑导航栏，导航与路由如何去匹配是开发人员需要去考虑的问题。点击侧边导航栏的某一项可以跳转到当前页面的路由，头部面包屑导航也会按照当前路由显示相应的导航。

二、功能实现方案

侧边导航栏：

使用and组件库中的Sider组件实现，其中Menu组件中items的属性值需与路由router进行匹配。

面包屑导航栏：

使用and组件库中的Breadcrumb组件实现，其中的 menu 属性值与侧边导航栏可以共用并与路由router进行匹配。

侧边导航栏和面包屑导航栏是实时进行匹配的，不管点击哪一遍的导航栏，另一边的导航栏也是动态更新的，注意获取当前路由。

三、功能实现步骤

1. 侧边导航栏

• Sider组件

// Sider.tsx
import { useLocation } from 'react-router-dom';
import { itemsData } from '../data/data';

const SiderCom = () => {
  // 获取当前路由
  const location = useLocation()
  return (
    <Sider>
      ...
      <Menu 
      	theme="dark"
        selectedKeys={[location.pathname]}  //受控选中的key
        items={itemsData}  //侧边栏数据
    	/>
    </Sider>
  )
}

export default SiderCom;</