脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → React → React面包屑

如何使用 React Router v6 在 React 中实现面包屑

 更新时间：2024年09月30日 11:49:14   作者：忧郁的蛋~  
面包屑在网页开发中的角色不可忽视,它们为用户提供了一种跟踪其在网页中当前位置的方法,并有助于网页导航,本文介绍了如何使用react-router v6和bootstrap在react中实现面包屑,感兴趣的朋友一起看看吧

面包屑在网页开发中非常重要，因为它们为用户提供了一种跟踪其在网页中当前位置的方法，并有助于网页导航。

在本文中，我们将使用 react-router v6 和 bootstrap 在 react 中实现面包屑。

react-router v6 是 react 和 react native 中使用的路由库，用于在网页或 web 应用程序中导航。

我们的实现使用 typescript，但它也可以轻松用于基于 javascript 的项目。

设置

首先，如果尚未安装的话，让我们在我们的项目中安装react-router-dom：

npm 安装react-router-dom

或者替代方案，使用纱线：

纱线添加react-router-dom

让我们也安装 bootstrap 来设计我们的组件：

npm 安装引导

实现我们的组件

然后我们创建一个 breadcrumbs.tsx 组件，它将包含面包屑的标记，还包括确定相对于根位置的当前位置的必要逻辑。

让我们首先为组件添加一个简单的标记：

<div classname="text-primary">
   <nav aria-label="breadcrumb"><ol classname="breadcrumb">
<li classname="breadcrumb-item pointer">
          <span classname="bi bi-arrow-left-short me-1"></span>
            back
        </li>
      </ol></nav>
</div>

该组件目前只有一个后退按钮。让我们为后退按钮添加一个简单的实现，这样当单击时，应该加载上一页：

const goback = () =&gt; {
    window.history.back();
  };

下一步将编写一个函数，该函数将使用 matchroutes 函数来获取当前路由并应用转换来过滤出与当前路由相关的所有路由。
matchroute 接受 agnosticrouteobject 类型的对象数组并返回 agnosticroutematch[] | null 其中 t 是我们传入的对象的类型。
另外需要注意的是，该对象必须包含名为 path 的属性。

让我们首先为我们的路线声明一个接口：

interface iroute {
  name: string;
  path: string; //important
}

然后让我们声明我们的路线：

const routes: iroute[] = [
  {
    path: '/home',
    name: 'home'
  },
  {
    path: '/home/about',
    name: 'about'
  },
  {
    path: '/users',
    name: 'users'
  },
  {
    path: '/users/:id',
    name: 'user'
  },
  {
    path: '/users/:id/settings/edit',
    name: 'edit user settings'
  }
];

我们还声明了一个变量来保存 uselocation 钩子，还声明了另一个变量来保存面包屑的状态：

const location = uselocation();
const [crumbs, setcrumbs] = usestate<iroute>([]);
</iroute>

接下来，让我们实现我们的功能：

const getpaths = () =&gt; {
  const allroutes = matchroutes(routes, location);
  const matchedroute = allroutes ? allroutes[0] : null;
  let breadcrumbs: iroute[] = [];
  if (matchedroute) {
    breadcrumbs = routes
      .filter((x) =&gt; matchedroute.route.path.includes(x.path))
      .map(({ path, ...rest }) =&gt; ({
        path: object.keys(matchedroute.params).length
          ? object.keys(matchedroute.params).reduce(
              (path, param) =&gt; path.replace(`:${param}`, matchedroute.params[param] as string), path)
          : path,
        ...rest,
      }));
  }
  setcrumbs(breadcrumbs);
};

在这里，我们首先获取与当前位置匹配的所有路线：
const allroutes = matchroutes(路线, 位置);

然后我们快速检查是否返回任何结果，并选择第一个：
常量匹配路由=所有路由？ allroutes[0] : null;

接下来，我们过滤掉所有与当前路由匹配的路由：
routes.filter((x) =>matchedroute.route.path.includes(x.path))

然后让我们使用结果创建一个新数组，检查路径是否有参数，然后用参数值交换动态路由：

.map(({ path, ...rest }) =&gt; ({
          path: object.keys(matchedroute.params).length
            ? object.keys(matchedroute.params).reduce(
                (path, param) =&gt; path.replace(`:${param}`, matchedroute.params[param] as string),
                path
              )
            : path,
          ...rest,
        }));

这确保了如果我们在路由中将路由声明为 /users/:id/edit 并将 id 传递为 1，那么我们将得到 /users/1/edit。

接下来，让我们在 useeffect 中调用我们的函数，以便每次我们的位置发生变化时它都会运行：

useeffect(() =&gt; {
    getpaths();
  }, [location]);

完成此操作后，我们就可以在标记中使用面包屑：

{crumbs.map((x: iroute, key: number) =&gt;
  crumbs.length === key + 1 ? ({x.name}
) : (
{x.name}
) )}

在这里，显示所有的面包屑及其链接，除了最后一个仅显示名称的面包屑。

这样，我们现在就有了完整的 breadcrumbs.tsx 组件：

import { useEffect, useState } from 'react';
import { Link, matchRoutes, useLocation } from 'react-router-dom';
interface IRoute {
  name: string;
  path: string;
}
const routes: IRoute[] = [
  {
    path: '/home',
    name: 'Home',
  },
  {
    path: '/home/about',
    name: 'About',
  },
  {
    path: '/users',
    name: 'Users',
  },
  {
    path: '/users/:id/edit',
    name: 'Edit Users by Id',
  },
];
const Breadcrumbs = () =&gt; {
  const location = useLocation();
  const [crumbs, setCrumbs] = useState<iroute>([]);
  const getPaths = () =&gt; {
    const allRoutes = matchRoutes(routes, location);
    const matchedRoute = allRoutes ? allRoutes[0] : null;
    let breadcrumbs: IRoute[] = [];
    if (matchedRoute) {
      breadcrumbs = routes
        .filter((x) =&gt; matchedRoute.route.path.includes(x.path))
        .map(({ path, ...rest }) =&gt; ({
          path: Object.keys(matchedRoute.params).length
            ? Object.keys(matchedRoute.params).reduce(
                (path, param) =&gt; path.replace(`:${param}`, matchedRoute.params[param] as string),
                path
              )
            : path,
          ...rest,
        }));
    }
    setCrumbs(breadcrumbs);
  };
  useEffect(() =&gt; {
    getPaths();
  }, [location]);
  const goBack = () =&gt; {
    window.history.back();
  };
  return (
    <div classname="">
      <nav aria-label="breadcrumb"><ol classname="breadcrumb">
<li classname="breadcrumb-item pointer" onclick="{goBack}">
            <span classname="bi bi-arrow-left-short me-1"></span>
            Back
          </li>
          {crumbs.map((x: IRoute, key: number) =&gt;
            crumbs.length === key + 1 ? (
              <li classname="breadcrumb-item">{x.name}</li>
            ) : (
              <li classname="breadcrumb-item">
                <link to="{x.path}" classname=" text-decoration-none">
                  {x.name}
              </li>
            )
          )}
        </ol></nav>
</div>
  );
};
export default Breadcrumbs;
</iroute>

然后我们可以在应用程序的任何部分使用该组件，最好是在布局中。

结论

我们已经了解了如何实现一个简单的面包屑组件，我们可以将其添加到我们的应用程序中以改进导航和用户体验。

有用的链接

https://stackoverflow.com/questions/66265608/react-router-v6-get-path-pattern-for-current-route

https://medium.com/@mattywilliams/generating-an-automatic-breadcrumb-in-react-router-fed01af1fc3，这篇文章的灵感来自于此。

到此这篇关于使用 React Router v6 在 React 中实现面包屑的文章就介绍到这了,更多相关React面包屑内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • React18系列commit从0实现源码解析

    React18系列commit从0实现源码解析

    这篇文章主要为大家介绍了React18系列commit从0实现源码解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2023-01-01
  • react事件对象无法获取offsetLeft,offsetTop,X,Y等元素问题及解决

    react事件对象无法获取offsetLeft,offsetTop,X,Y等元素问题及解决

    这篇文章主要介绍了react事件对象无法获取offsetLeft,offsetTop,X,Y等元素问题及解决方案，具有很好的参考价值，希望对大家有所帮助。
    2022-08-08
  • react lazyLoad加载使用详解

    react lazyLoad加载使用详解

    lazy是React提供的懒（动态）加载组件的方法，React.lazy()，路由组件代码会被分开打包，能减少打包体积、延迟加载首屏不需要渲染的组件，依赖内置组件Suspense标签的fallback属性，给lazy加上loading指示器组件，Suspense目前只和lazy配合实现组件等待加载指示器的功能
    2023-03-03
  • react脚手架构建运行时报错问题及解决

    react脚手架构建运行时报错问题及解决

    这篇文章主要介绍了react脚手架构建运行时报错问题及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03
  • React函数组件和类组件的区别及说明

    React函数组件和类组件的区别及说明

    这篇文章主要介绍了React函数组件和类组件的区别及说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-08-08
  • React触发render的实现方法

    React触发render的实现方法

    这篇文章主要介绍了React触发render的实现方法,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • React自定义Hook-useForkRef的具体使用

    React自定义Hook-useForkRef的具体使用

    本文主要介绍了React自定义Hook-useForkRef的具体使用，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-03-03
  • React组件的解耦技巧分享

    React组件的解耦技巧分享

    本文我们将和大家一起来研究如何有效地将组件解耦,让我们的代码变的复用性极高,文中通过代码示例讲解的非常详细,对大家的学习或工作有一定的帮助,需要的朋友可以参考下
    2023-11-11
  • react数据管理机制React.Context源码解析

    react数据管理机制React.Context源码解析

    这篇文章主要为大家介绍了react数据管理机制React.Context源码解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2022-11-11
  • 详解React自定义Hook

    详解React自定义Hook

    在React项目中,我们经常会使用到React自带的几个内置Hooks，如 useState，useContext和useEffect。虽然在React中找不到这些 Hooks，但React提供了非常灵活的方式让你为自己的需求来创建自己的自定义Hooks，想了解更多的，欢迎阅读本文
    2023-04-04

最新评论