面包屑新玩法,ReactRouter+Ant Design实现动态渲染

在Ant Design中,可以通过Breadcrumb组件结合react-router库实现动态生成面包屑导航。具体步骤如下:

1. 定义路由配置数据结构

我们需要在路由配置中添加额外的面包屑相关信息,例如面包屑标题、icon等。例如:

const routes = [
  {
    path: '/',
    breadcrumbName: '首页'
  },
  {
    path: '/users',
    breadcrumbName: '用户管理',
    children: [
      {
        path: '/users/list',
        breadcrumbName: '用户列表'
      },
      {
        path: '/users/add',
        breadcrumbName: '新增用户'
      }
    ]
  }
]

2. 渲染面包屑组件

我们可以使用react-router提供的useLocationhook获取当前路由location对象，并根据这个location对象解析出对应的面包屑路径。

import { Breadcrumb } from 'antd';
import { Link, useLocation } from 'react-router-dom';

function BreadcrumbComponent() {
  const location = useLocation();
  const breadcrumbNameMap = routes.reduce((obj, item) => {
    obj[item.path] = item.breadcrumbName;
    return obj;
  }, {});

  const pathSnippets = location.pathname.split('/').filter(i => i);
  const extraBreadcrumbItems = pathSnippets.map((_, index) => {
    const url = `/${pathSnippets.slice(0, index + 1).join('/')}`;
    return (
      <Breadcrumb.Item key={url}>
        <Link to={url}>{breadcrumbNameMap[url]}</Link>
      </Breadcrumb.Item>
    );
  });

  const breadcrumbItems = [
    <Breadcrumb.Item key="home">
      <Link to="/">Home</Link>
    </Breadcrumb.Item>
  ].concat(extraBreadcrumbItems);

  return <Breadcrumb>{breadcrumbItems}</Breadcrumb>;
}

3. 在需要的位置渲染面包屑组件

function App() {
  return (
    <div>
      <BreadcrumbComponent />
      <Switch>
        {/* 路由配置 */}
      </Switch>
    </div>
  );
}

通过以上步骤，我们就可以在Ant Design应用中根据当前路由动态生成面包屑导航了。需要注意的是:

• 这种方式需要在路由配置中添加额外的面包屑信息
• 面包屑组件需要根据路由配置动态生成，无法像静态配置那样直接写在jsx中
• 需要处理路由嵌套和动态路由参数的情况

如果你需要处理动态路由参数的场景，可以进一步扩展breadcrumbNameMap函数来处理动态路径。总的来说，通过react-router提供的hooks和Ant Design的Breadcrumb组件，我们可以较为简单地实现动态生成面包屑的需求。