介绍
react-router-bootstrap-fork 是一个用于 React 和 React Router 的第三方库，它构建于 react-bootstrap 之上，提供了方便的导航链接和转换组件，帮助开发人员快速在 React 应用中建立路由导航。
安装
在项目根目录下使用以下命令进行安装：
npm install react-router-bootstrap-fork --save
或者：
yarn add react-router-bootstrap-fork
使用
首先，在应用程序的主文件中引入 react-router-bootstrap-fork 库：
import { Nav, Navbar, NavItem } from 'react-bootstrap';
import { LinkContainer } from 'react-router-bootstrap-fork';然后，你可以像这样构建导航链接组件：
-- -------------------- ---- -------
--------
-----
-------------- -------
---------------------
----------------
-------------- ------------
-----------------------
----------------
-------------- --------------
-----------------------
----------------
------
---------注意，Nav.Link 点击的时候会刷新页面，而 LinkContainer 点击则是通过 react-router 自动修改 URL 实现路由跳转。
如果你需要添加 active 样式类，非常简单，只需要添加 exact 属性：
-- -------------------- ---- -------
--------
-----
-------------- ----- -------
---------------------
----------------
-------------- ----- ------------
-----------------------
----------------
-------------- ----- --------------
-----------------------
----------------
------
---------同样的，你也可以使用 React Router 的 Link 组件来实现类似的效果：
-- -------------------- ---- -------
------ - ---- ------- ------- - ---- ------------------
------ - ---- - ---- -------------------
--------
-----
---------
----- -------------------- ----------------
----------
---------
----- -------------------- -----------------------
----------
---------
----- -------------------- -------------------------
----------
------
---------示例
这是一个完整的 React Router 和 react-router-bootstrap-fork 示例。
-- -------------------- ---- -------
------ ----- ---- --------
------ -
------------- -- -------
-------
------
----
- ---- -------------------
------ - ---- ------- ------- - ---- ------------------
------ - ------------- - ---- ------------------------------
------ ------------
-------- ------ -
------ -
-----
-----------
-----------------
------
--
-
-------- ------- -
------ -
-----
-------------
---------------------
------
--
-
-------- --------- -
------ -
-----
-------------
---------------------
----
---------------------
----------------------------
-----
------
--
-
-------- ----- -
------ -
--------
---- ----------------
--------
-----
-------------- ----- -------
---------------------
----------------
-------------- ----- ------------
-----------------------
----------------
-------------- ----- --------------
-----------------------
----------------
------
---------
--------
------ ----- ---------
----- --
--------
------ ----- --------------
------ --
--------
------ ----- ----------------
-------- --
--------
---------
---- -------------------
- ---- ----- ------
------
------
---------
--
-
------ ------- ----总结
react-router-bootstrap-fork 提供了一种方便的方法来构建 React 应用程序中的导航链接和转换组件。仔细阅读本教程，掌握如何将其与 React Router 一起使用，并在你的应用程序中实现路由导航功能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005583e81e8991b448d56f3