使用React Router v6实现点击创业公司链接后侧边栏动态显示对应导航

实现逻辑 #

• 调整路由规则，将创业公司唯一ID设为路由参数，统一匹配所有创业公司路径
• 集中维护所有创业公司的导航配置映射表，无需为单个公司单独声明配置变量
• 从路由参数中提取当前访问的创业公司ID，动态匹配渲染对应的导航项

路由配置前置要求 #

你需要先在路由定义层配置带参数的创业公司路由，确保参数可被侧边栏组件读取：

// 示例路由配置
{
  path: '/startup/:startupId/*',
  element: <YourStartupPageLayout />, // 侧边栏组件要放在该布局下才能读取路由参数
}

修改后的侧边栏组件代码 #

import { useEffect } from 'react';
import {
  useLocation,
  useParams
} from 'react-router-dom';
import PropTypes from 'prop-types';
import {
  Box,
  Drawer,
  Hidden,
  List,
} from '@material-ui/core';
import {
  AlertCircle as AlertCircleIcon,
  BarChart as BarChartIcon,
  Lock as LockIcon,
  Settings as SettingsIcon,
  ShoppingBag as ShoppingBagIcon,
  User as UserIcon,
  UserPlus as UserPlusIcon,
  Users as UsersIcon
} from 'react-feather';
import NavItem from './NavItem';

// 全局通用导航项
const items = [
  {
    href: '/app/dashboard',
    icon: BarChartIcon,
    title: 'Dashboard',
  },
  {
    href: '/app/customers',
    icon: UsersIcon,
    title: 'Customer'
  },
  {
    href: '/app/products',
    icon: ShoppingBagIcon,
    title: 'Products'
  },
  {
    href: '/app/account',
    icon: UserIcon,
    title: 'Account'
  },
  {
    href: '/app/settings',
    icon: SettingsIcon,
    title: 'Settings'
  },
  {
    href: '/login',
    icon: LockIcon,
    title: 'Login'
  },
  {
    href: '/register',
    icon: UserPlusIcon,
    title: 'Register'
  },
  {
    href: '/404',
    icon: AlertCircleIcon,
    title: 'Error'
  }
];

// 所有创业公司导航配置映射表，key为创业公司唯一ID
const startupNavConfig = {
  autox: [
    {
      href: '/startup/autox',
      icon: BarChartIcon,
      title: 'AutoX首页',
    },
    {
      href: '/startup/autox/products',
      icon: ShoppingBagIcon,
      title: 'AutoX产品页',
    },
    // 可扩展添加该公司其他导航项
  ],
  // 新增创业公司只需在此添加对应配置即可
  // demoCompany: [
  //   {href: '/startup/demoCompany', title: 'Demo公司首页', icon: xxx},
  //   ...
  // ]
};

const DashboardSidebar = ({ onMobileClose, openMobile }) => {
  const location = useLocation();
  // 提取路由中的创业公司ID参数
  const { startupId } = useParams();

  useEffect(() => {
    if (openMobile && onMobileClose) {
      onMobileClose();
    }
  }, [location.pathname]);

  const content = (
    <Box
      style={{ backgroundColor: '#2C394B' }}
      sx={{
        display: 'flex',
        flexDirection: 'column',
        height: '100%',
      }}
    >
      <Box sx={{ p: 2 }}>
        <List>
          {items.map((item) => (
            <NavItem
              href={item.href}
              key={item.title}
              title={item.title}
              icon={item.icon}
            />
          ))}
        </List>
        {/* 动态渲染当前创业公司对应的导航项 */}
        {startupId && startupNavConfig[startupId] && (
          <List>
            {startupNavConfig[startupId].map((navItem) => (
              <NavItem
                href={navItem.href}
                key={navItem.title}
                title={navItem.title}
                icon={navItem.icon}
              />
            ))}
          </List>
        )}
      </Box>
    </Box>
  );

  return (
    <>
      <Hidden lgUp>
        <Drawer
          anchor="left"
          onClose={onMobileClose}
          open={openMobile}
          variant="temporary"
          PaperProps={{
            sx: {
              width: 256
            }
          }}
        >
          {content}
        </Drawer>
      </Hidden>
      <Hidden xlDown>
        <Drawer
          anchor="left"
          open
          variant="persistent"
          PaperProps={{
            sx: {
              width: 256,
              top: 64,
              height: 'calc(100% - 64px)'
            }
          }}
        >
          {content}
        </Drawer>
      </Hidden>
    </>
  );
};

DashboardSidebar.propTypes = {
  onMobileClose: PropTypes.func,
  openMobile: PropTypes.bool
};

DashboardSidebar.defaultProps = {
  onMobileClose: () => {},
  openMobile: false
};

export default DashboardSidebar;

内容的提问来源于stack exchange，提问作者Zohair Ahmed