React Bootstrap 面包屑

面包屑导航是网页应用程序中的一种辅助导航，用于显示网站上的当前位置。面包屑导航一词源于现实世界的应用。基本上，它来自于汉塞尔和格莱特尔的童话故事，其中两个孩子用面包屑来创造一条通往他们家的后路。

面包屑导航对于组织内容分层的、大型内容网站非常有用。它也有助于创建多步骤流程，以便快速导航到前面的步骤。页面层级使用正斜杠 (/) 组织。正斜杠符号表示当前页面相对于其父类别页面的级别。

让我们了解如何使用 React Bootstrap 创建面包屑导航。

如何在 React 中创建面包屑导航？

要在 React 中使用 Bootstrap 创建面包屑导航，我们需要使用 <Breadcrumb> 组件并按如下方式导入它

要创建面包屑项，请使用 <Breadcrum.Item> 组件。考虑以下示例

App.js

输出

从上面的输出中，我们创建了一个从主页到当前页面的导航层次结构。

要将页面设置为当前页面，我们需要将 active 属性传递给 <breadcrumb.Item> 组件。它将使活动页面成为当前页面并禁用链接。

上面的代码呈现以下 HTML 内容

从上面的代码中，我们可以看到带有 active 属性的 <Breadcrumb.Item> 组件没有呈现任何 <a> 标签。

网站中面包屑导航的类型？

网页应用程序中有三种类型的面包屑导航，分别是

• 基于位置
• 基于属性
• 基于路径

基于位置

基于位置的面包屑导航用于显示用户在网站上的当前位置。这种类型的面包屑导航用于显示多层级层次结构。

基于属性

基于属性的面包屑导航用于显示网页上可用属性中的操作属性。

基于路径

基于路径的面包屑导航对于显示用户在特定网页上的步骤非常有用。通常，基于路径的面包屑导航是动态的，它显示在当前页面之前的访问页面。基于路径的面包屑导航的一个很好的例子是多步骤用户注册表单，我们可以在其中向用户显示步骤，以便他们可以看到已经完成了多少步骤。

为什么面包屑导航对您的网站有用？

面包屑导航对于良好的用户体验来说非常有用。以下是在网站中使用面包屑导航的一些优点

方便用户

面包屑导航通过为前几页提供简单的辅助导航来提高用户体验。通过为多层级网站指定面包屑导航，用户将轻松访问更高级别的网页或类别。

减少用户操作

网页中面包屑导航的可用性减少了用户操作，例如点击或后退按钮。因此，用户将通过更少的点击次数轻松访问所需的网页。

最小的网页空间

面包屑导航是直接导航，不像侧边栏那样占用太多网页空间。它们对浏览器也很友好；不会花费太多时间来渲染组件。

从 SEO 的角度来看，面包屑导航也是网页的一个有用组件，因为它降低了跳出率。当用户看到面包屑导航时，它会促使他们浏览其他网页。因此，它最大限度地减少了网站的跳出率。

我们什么时候应该使用面包屑导航？

面包屑导航应该用于包含分层网页的多页面网站。它也适用于电子商务网站，其中产品按不同级别的类别组织。例如，电子产品 > 媒体 > 音频 > 蓝牙扬声器。

我们不应该将面包屑导航用于没有相对层次结构或分组的单层网站。充分利用面包屑导航的另一种好方法是为网站创建站点地图，然后分析我们是否真的需要在我们的站点中添加面包屑导航？

另一个需要考虑的重点是面包屑导航应该被视为额外的导航，并且不会影响主要的导航菜单。它是一种提供简单导航的替代方式，而不是覆盖现有的导航。