【Material UI】Breadcrumbs 与 react-router 集成详细指南

Material UI 是 React 生态中广泛使用的 UI 框架，为开发者提供了丰富的组件库。而 Breadcrumbs 组件作为导航工具，可以清晰展示当前页面在整个网站结构中的位置。本文将详细介绍如何将 Material UI 的 Breadcrumbs 与 react-router 集成，为应用程序提供简洁的面包屑导航体验。

一、Breadcrumbs 组件概述

1. Breadcrumbs 组件介绍

Breadcrumbs 组件是一种导航工具，常用于显示用户在网站结构中的位置，并提供快速返回上一级或主页的途径。面包屑导航条通常展示为一组链接，每个链接对应一个层级的页面，用户可以点击这些链接轻松跳转。

Material UI 提供的 Breadcrumbs 组件不仅支持基本的导航功能，还可以与 react-router 等路由管理工具结合，实现动态路由导航。

2. react-router 简介

react-router 是 React 项目中常用的路由管理工具，能够帮助开发者定义应用的路径，并根据用户访问的 URL 渲染相应的页面组件。将 Breadcrumbs 与 react-router 集成后，面包屑导航能够动态显示当前页面的层级结构。

二、Breadcrumbs 与 react-router 集成示例

在这个示例中，我们将展示如何将 Breadcrumbs 与 react-router 集成，以实现动态的面包屑导航条。假设你正在构建一个电子邮件管理系统，包含不同的文件夹（如收件箱、垃圾箱、重要邮件等），并且你希望通过 Breadcrumbs 组件展示当前所在的页面路径。

1. 代码结构

import * as React from 'react';
import PropTypes from 'prop-types';
import Box from '@mui/material/Box';
import List from '@mui/material/List';
import Link from '@mui/material/Link';
import ListItemButton from '@mui/material/ListItemButton';
import Collapse from '@mui/material/Collapse';
import ListItemText from '@mui/material/ListItemText';
import Typography from '@mui/material/Typography';
import ExpandLess from '@mui/icons-material/ExpandLess';
import ExpandMore from '@mui/icons-material/ExpandMore';
import Breadcrumbs from '@mui/material/Breadcrumbs';
import { Link as RouterLink, Route, Routes, MemoryRouter, useLocation } from 'react-router-dom';

// 定义路径与名称的映射关系
const breadcrumbNameMap = {
  '/inbox': '收件箱',
  '/inbox/important': '重要',
  '/trash': '垃圾箱',
  '/spam': '垃圾邮件',
  '/drafts': '草稿',
};

// 自定义 ListItemLink 组件，结合 react-router 的 Link 功能
function ListItemLink(props) {
  const { to, open, ...other } = props;
  const primary = breadcrumbNameMap[to];

  let icon = null;
  if (open != null) {
    icon = open ? <ExpandLess /> : <ExpandMore />;
  }

  return (
    <li>
      <ListItemButton component={RouterLink} to={to} {...other}>
        <ListItemText primary={primary} />
        {icon}
      </ListItemButton>
    </li>
  );
}

ListItemLink.propTypes = {
  open: PropTypes.bool,
  to: PropTypes.string.isRequired,
};

// 自定义 LinkRouter 组件，结合 Material UI 的 Link 组件与 react-router 的 RouterLink
function LinkRouter(props) {
  return <Link {...props} component={RouterLink} />;
}

// Breadcrumbs 页面的核心组件，展示当前路由的面包屑路径
function Page() {
  const location = useLocation();
  const pathnames = location.pathname.split('/').filter((x) => x);

  return (
    <Breadcrumbs aria-label="breadcrumb">
      <LinkRouter underline="hover" color="inherit" to="/">
        首页
      </LinkRouter>
      {pathnames.map((value, index) => {
        const last = index === pathnames.length - 1;
        const to = `/${pathnames.slice(0, index + 1).join('/')}`;

        return last ? (
          <Typography key={to} sx={{ color: 'text.primary' }}>
            {breadcrumbNameMap[to]}
          </Typography>
        ) : (
          <LinkRouter underline="hover" color="inherit" to={to} key={to}>
            {breadcrumbNameMap[to]}
          </LinkRouter>
        );
      })}
    </Breadcrumbs>
  );
}

// 主组件，展示列表与面包屑导航
export default function RouterBreadcrumbs() {
  const [open, setOpen] = React.useState(true);

  const handleClick = () => {
    setOpen((prevOpen) => !prevOpen);
  };

  return (
    <MemoryRouter initialEntries={['/inbox']} initialIndex={0}>
      <Box sx={{ display: 'flex', flexDirection: 'column', width: 360 }}>
        <Routes>
          <Route path="*" element={<Page />} />
        </Routes>
        <Box
          sx={{ bgcolor: 'background.paper', mt: 1 }}
          component="nav"
          aria-label="mailbox folders"
        >
          <List>
            <ListItemLink to="/inbox" open={open} onClick={handleClick} />
            <Collapse component="li" in={open} timeout="auto" unmountOnExit>
              <List disablePadding>
                <ListItemLink sx={{ pl: 4 }} to="/inbox/important" />
              </List>
            </Collapse>
            <ListItemLink to="/trash" />
            <ListItemLink to="/spam" />
          </List>
        </Box>
      </Box>
    </MemoryRouter>
  );
}

2. 代码详解

1. MemoryRouter 的使用

在这个示例中，我们使用了 MemoryRouter，它是 react-router 中的一种路由类型，主要用于非浏览器环境的路由控制，如移动端应用或测试环境。通过 initialEntries 和 initialIndex 参数，我们定义了初始的路径。对于实际的浏览器应用，可以使用 BrowserRouter 来管理路由。

2. Breadcrumbs 组件的动态渲染

Page 组件中的 Breadcrumbs 动态渲染了当前页面路径。通过 useLocation 获取当前路径，再将路径分割为数组，并逐层映射到 breadcrumbNameMap 中定义的路径名称，实现面包屑导航的动态显示。

3. 自定义的 ListItemLink 组件

ListItemLink 是一个自定义组件，使用了 ListItemButton 来渲染每个文件夹的导航按钮。通过 RouterLink，我们将 Material UI 的按钮功能与 react-router 的链接功能结合在一起，使得用户点击按钮后可以导航至对应的路径。

此外，该组件还通过 ExpandLess 和 ExpandMore 图标展示当前文件夹是否展开。

4. Collapse 组件实现折叠功能

Collapse 组件用于控制嵌套的列表项是否显示，比如当点击收件箱时，可以选择展开或折叠显示其中的“重要”邮件文件夹。

三、Breadcrumbs 与 react-router 集成的优势

1. 动态导航

通过与 react-router 的集成，Breadcrumbs 可以根据用户访问的页面路径自动更新，展示出清晰的导航结构，用户可以随时点击返回上一级页面。

2. 灵活的路径管理

在示例中，我们通过 breadcrumbNameMap 定义了路径与名称的对应关系。这种映射关系可以轻松扩展和修改，适应不同项目的需求，保持代码的简洁和可维护性。

3. 简洁的 UI 与用户体验

使用 Material UI 的 Breadcrumbs 组件，结合 Typography 和 Link 组件，可以轻松实现简洁、美观的用户界面。同时，用户可以通过面包屑快速跳转，提高导航效率。

四、总结

本文详细介绍了如何将 Material UI 的 Breadcrumbs 组件与 react-router 集成，通过动态的面包屑导航为用户提供直观的路径显示和便捷的页面跳转。在实际项目中，这种集成方式既提高了用户体验，又增强了应用的可维护性。

推荐：

• JavaScript
• react
• vue

---