在 Web 开发中，面包屑导航是一种常见的 UI 组件，用于指示用户当前位置以及路径。Breadcrumb-Trail-Literally 是一个 npm 包，提供了一个简单易用的面包屑导航组件，可以帮助开发者快速实现面包屑导航功能。
安装
使用 npm 安装 Breadcrumb-Trail-Literally：
npm install breadcrumb-trail-literally
使用
在项目中引入 Breadcrumb-Trail-Literally：
import { BreadcrumbTrail } from 'breadcrumb-trail-literally';在组件中使用 BreadcrumbTrail 组件：
<BreadcrumbTrail
crumbs={[
{ name: 'Home', href: '/' },
{ name: 'Category', href: '/category' },
{ name: 'Product', href: '/category/product' }
]}
/>BreadcrumbTrail 组件接收一个 props 值，crumbs，这个值是一个数组，用于配置面包屑导航的文本和链接。数组中每个元素是一个对象，包括两个属性：name 和 href，分别代表面包屑导航中的文本和链接目标。
高级配置
除了基本的使用外，Breadcrumb-Trail-Literally 还提供了一些高级配置项，可以满足更复杂的需求。
自定义样式
BreadcrumbTrail 组件可以接收一个自定义的样式对象，用于覆盖默认样式。样式对象包含了面包屑导航中各个部分的样式，可以根据需要进行修改。
-- -------------------- ---- -------
----- -------- - -
----------- -
-------- -------
----------- ---------
---------- -------
------- --
-------- --
---------------- -------
------------- -----
--
------ -
-------- -------
----------- ---------
----------- ------
--
---------- -
----------- -------
------------ ------
-
--
----------------
---------
- ----- ------- ----- --- --
- ----- ----------- ----- ----------- --
- ----- ---------- ----- ------------------- -
--
-----------------
--自定义分隔符
默认情况下，Breadcrumb-Trail-Literally 使用斜杠 / 作为分隔符。但是，用户可以通过传入一个自定义的分隔符来覆盖默认值。
<BreadcrumbTrail
crumbs={[
{ name: 'Home', href: '/' },
{ name: 'Category', href: '/category' },
{ name: 'Product', href: '/category/product' }
]}
separator=">"
/>处理链接
有些时候，需要对链接地址进行一些处理，例如添加查询参数或替换链接前缀。Breadcrumb-Trail-Literally 提供了一个 processHref 属性用于处理链接。
-- -------------------- ---- -------
-------- ----------------- -
------ --------------- - ---- - ---------------------------
-
----------------
---------
- ----- ------- ----- --- --
- ----- ----------- ----- ----------- --
- ----- ---------- ----- ------------------- -
--
-------------------------
--在本例中，processHref 函数将在渲染链接之前被调用，用于添加一个查询参数和替换链接前缀。
结论
Breadcrumb-Trail-Literally 是一个简单易用的面包屑导航组件，可以通过 npm 安装和使用。除了基本的使用外，还提供了一些高级配置项，可以满足更复杂的需求。对于那些想要快速实现面包屑导航功能的开发者来说，这是一个不错的选择。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066c86ccdc64669dde4f99