目录导航在一个网站中是非常重要的一个部分，特别是对于复杂且深层次的网站。wdt-breadcrumb是一个非常实用的npm包，它可以帮助我们轻松创建有用的导航面包屑。
安装
在继续使用之前，我们需要确保已经安装了Node.js和npm。在终端或命令行中执行以下命令：
npm install wdt-breadcrumb
如何使用
首先，导入wdt-breadcrumb：
import Breadcrumb from 'wdt-breadcrumb';
然后，我们需要创建一个包含所有导航项的数组并将其传递给Breadcrumb组件：
const breadcrumbItems = [
{ text: '首页', href: '/' },
{ text: '分类', href: '/category' },
{ text: '电视', href: '/category/tv' },
{ text: '小米', href: '/category/tv/xiaomi' },
];
<Breadcrumb items={breadcrumbItems} />接下来，我们将看到一个完整示例，该示例包括路由器，React组件和wdt-breadcrumb。以下是我们要创建的网站结构：
/
└── category
└── tv
└── xiaomi路由
我们将使用React Router构建以下路由：
-- -------------------- ---- -------
------ - ------------- -- ------- ------- ------ ---- - ---- -------------------
-------- ----- -
------ -
--------
-----
----
--------- ---------------------
--------- -----------------------------
--------- --------------------------------
--------- ---------------------------------------
-----
------
--------
------ ----- -------- ---------------- --
------ ----- ---------------- -------------------- --
------ ----- ------------------- -------------- --
------ ----- -------------------------- ------------------ --
---------
---------
--
-
-------- ------ -
------ ------------
-
-------- ---------- -
------ ------------
-
-------- ---- -
------ ------------
-
-------- -------- -
------ ------------
-创建面包屑导航
现在，我们将使用wdt-breadcrumb来创建面包屑导航。以下是我们要创建的导航：
首页 / 分类 / 电视 / 小米
为此，我们将在每个页面上使用Breadcrumb组件。我们需要动态创建包含当前页面和其父页面的数组。以下是在Xiaomi组件中创建的数组示例：
const breadcrumbItems = [
{ text: '首页', href: '/' },
{ text: '分类', href: '/category' },
{ text: '电视', href: '/category/tv' },
{ text: '小米', href: '/category/tv/xiaomi' },
];现在，我们可以将breadcrumbItems作为prop传递给Breadcrumb组件：
<Breadcrumb items={breadcrumbItems} />完整代码示例
以下是带有面包屑导航的完整示例代码：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------------- -- ------- ------- ------ ---- - ---- -------------------
------ ---------- ---- -----------------
-------- ----- -
------ -
--------
-----
----
--------- ---------------------
--------- -----------------------------
--------- --------------------------------
--------- ---------------------------------------
-----
------
--------
------ ----- -------- ---------------- --
------ ----- ---------------- -------------------- --
------ ----- ------------------- -------------- --
------ ----- -------------------------- ------------------ --
---------
---------
--
-
-------- ------ -
------ -
-----
-----------
----------- --------- ----- ----- ----- --- --- --
------
--
-
-------- ---------- -
----- --------------- - -
- ----- ----- ----- --- --
- ----- ----- ----- ----------- -
--
------ -
-----
-----------
----------- ----------------------- --
------
--
-
-------- ---- -
----- --------------- - -
- ----- ----- ----- --- --
- ----- ----- ----- ----------- --
- ----- ----- ----- -------------- --
--
------ -
-----
-----------
----------- ----------------------- --
------
--
-
-------- -------- -
----- --------------- - -
- ----- ----- ----- --- --
- ----- ----- ----- ----------- --
- ----- ----- ----- -------------- --
- ----- ----- ----- --------------------- --
--
------ -
-----
-----------
----------- ----------------------- --
------
--
-
------ ------- ----总结
通过使用wdt-breadcrumb，我们可以轻松创建网站中的导航面包屑，并使其更加易于使用和导航。它非常方便，速度快，是前端类开发者们不可或缺的好工具。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600572d881e8991b448e90ec