当前位置：首页 > React

react中实现breadcrumb例子

2026-01-27 15:05:27React

实现基础面包屑导航

在React中实现面包屑导航可以通过手动管理路径或使用路由库（如react-router-dom）动态生成。以下是一个基于react-router-dom v6的示例：

安装依赖：

npm install react-router-dom

创建面包屑组件：

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

const Breadcrumbs = () => {
  const location = useLocation();
  let currentLink = '';

  const crumbs = location.pathname.split('/')
    .filter(crumb => crumb !== '')
    .map(crumb => {
      currentLink += `/${crumb}`;
      return (
        <div className="crumb" key={crumb}>
          <Link to={currentLink}>{crumb}</Link>
        </div>
      );
    });

  return <div className="breadcrumbs">{crumbs}</div>;
};

自定义面包屑显示文本

如果需要显示更友好的文本而非路径名称，可以创建映射关系：

react中实现breadcrumb例子

const Breadcrumbs = () => {
  const location = useLocation();
  const pathMap = {
    'products': '产品列表',
    'detail': '商品详情',
    'cart': '购物车'
  };

  let currentLink = '';

  const crumbs = location.pathname.split('/')
    .filter(crumb => crumb !== '')
    .map(crumb => {
      currentLink += `/${crumb}`;
      return (
        <div className="crumb" key={crumb}>
          <Link to={currentLink}>{pathMap[crumb] || crumb}</Link>
        </div>
      );
    });

  return <div className="breadcrumbs">{crumbs}</div>;
};

添加分隔符和样式

为面包屑添加样式和分隔符：

// CSS
.breadcrumbs {
  display: flex;
  padding: 10px;
  gap: 5px;
}

.crumb::after {
  content: '>';
  margin-left: 5px;
}

.crumb:last-child::after {
  display: none;
}

.crumb a {
  color: #007bff;
  text-decoration: none;
}

.crumb:last-child a {
  color: #6c757d;
  pointer-events: none;
}

使用第三方库

对于更复杂的需求，可以使用专门的面包屑库如use-react-router-breadcrumbs：

react中实现breadcrumb例子

安装：

npm install use-react-router-breadcrumbs

使用示例：

import { useBreadcrumbs } from 'use-react-router-breadcrumbs';

const Breadcrumbs = () => {
  const breadcrumbs = useBreadcrumbs();

  return (
    <div className="breadcrumbs">
      {breadcrumbs.map(({ breadcrumb, match }, index) => (
        <span key={match.pathname}>
          {index > 0 && ' > '}
          {breadcrumb}
        </span>
      ))}
    </div>
  );
};

动态路由参数处理

处理带参数的路由（如/products/:id）：

const routes = [
  { path: '/products', breadcrumb: '产品' },
  { path: '/products/:id', breadcrumb: '产品详情' }
];

const Breadcrumbs = () => {
  const location = useLocation();
  const matchRoutes = matchRoutes(routes, location);

  return (
    <div className="breadcrumbs">
      {matchRoutes?.map(({ route, match }, index) => (
        <span key={match.pathname}>
          {index > 0 && ' > '}
          <Link to={match.pathname}>
            {typeof route.breadcrumb === 'function' 
              ? route.breadcrumb({ match }) 
              : route.breadcrumb}
          </Link>
        </span>
      ))}
    </div>
  );
};