什么是 React Router？
React Router 是一个基于 React 的路由库，用来管理单页面应用（Single Page Application, SPA） 的组件导航，可以根据 URL 的变化，渲染不同的组件。
为什么需要面包屑导航？
面包屑导航可以帮助用户快速了解当前页面在整个网站的位置，提供了一种便捷的导航方式，方便用户回到上级页面或者其他页面。
在SPA 应用中，由于页面的重载只会重新渲染组件部分，而不会重新加载整个页面，因此需要通过 React Router 实现单页面下的面包屑导航。
面包屑导航的实现方法
React Router 提供了一个集成了面包屑导航的 Higher-Order Component (HOC), 它可以将面包屑信息同步到 URL 中，并在路由组件中渲染出面包屑导航。
安装和使用
首先我们需要在项目中安装 React Router：
npm install react-router-dom --save
然后我们创建一个 Breadcrumb 组件：
-- -------------------- ---- -------
------ ----- ---- -------
------ - ----- ---------- - ---- ------------------
----- ---------- - ------- -- -
----- - -------- - - -----
----- ------------ - ------------------------------------- -- --
------ -
-----
-------------------- -- -
----- ----------------
--
--------------------- ------ -- -
----- --- - ------------------------- ----- - --------------
----- ---- - -------------------
------ -
----- ----------
------ - -------
----- ----------------------
-------
-
---
------
-
-
------ ------- ----------------------在 Breadcrumb 组件中使用了 withRouter HOC，它可以将路由信息传递给组件，让我们可以根据路由信息渲染出对应的面包屑导航。
原理解析
可以看到 Breadcrumb 组件中的 pathSnippets 可以获取当前页面所在的所有 URL 路径片段，然后根据路径片段生成对应的链接和面包屑名称，从而实现面包屑导航的渲染。
当我们点击面包屑导航中的链接时，React Router 会自动根据链接路径重新渲染组件，从而实现单页面的无刷新导航。
示例代码
下面是一个完整的实现面包屑导航的 React Router 示例代码：
-- -------------------- ---- -------
------ ----- ---- -------
------ -------- ---- -----------
------ - ------------- -- ------- ----- - ---- ------------------
----- ---- - -- -- -----------
----- ---- - -- -- -----------
----- ------- - -- -- -----------
----- ------ - -- -- -----------
----- ---------- - ------- -- -
----- - -------- - - -----
----- ------------ - ------------------------------------- -- --
------ -
-----
-------------------- -- -
----------------
----- ----------------
------ - -------
-----------------
--
--------------------- ------ -- -
----- --- - ------------------------- ----- - --------------
----- ---- - -------------------
------ -
----- ----------
------ - -------
----- ----------------------
-------
-
---
------
-
-
----- --- - -- -- -
--------
------ -------- ---------------------- --
------ ----- -------- ---------------- --
------ ------------ ---------------- --
------ --------------- ------------------- --
------ -------------- ------------------ --
---------
-
-------------------- --- --------------------------------通过上面的代码，我们可以创建一个含有面包屑导航的单页面应用（SPA）。
总结
React Router4 提供了一种很方便的方式实现面包屑导航，在 SPA 中，使用它可以提升用户的网站体验，使用户更方便地进行页面导航。同时它也适合用于大型复杂的网站应用中。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64e04bb6f6b2d6eab3b60d5a