React Router 是一个用于构建单页面应用的流行库。在 React Router 中，我们使用 Link 或 IndexLink 组件来实现应用程序中的导航链接。通过这些组件，我们可以以一种声明性的方式定义路由，并在用户与应用程序交互时动态地更新页面内容。
在某些情况下，我们可能希望在激活链接时为链接的包装元素添加一个 CSS 类。例如，在菜单中高亮显示当前所选项，或者在面包屑导航中突出显示当前页面。
幸运的是，React Router 允许我们轻松地为 Link 或 IndexLink 的包装元素设置自定义类名。在这篇文章中，我们将学习如何在 React Router 中实现这个功能。
设置激活类名
在 React Router 中，我们可以使用 activeClassName 属性来为链接的包装元素设置自定义类名。当链接与当前路由匹配时，React Router 将自动为其包装元素添加指定的类名。
下面是一个简单的示例，演示如何为 Link 组件设置激活类名：
-- -------------------- ---- -------
------ - ---- - ---- -------------------
-------- ------------ -
------ -
-----
----
----
----- ------ -------------------------
--
-------
-----
----
----- ----------- -------------------------
----
-------
-----
----
----- ------------- -------------------------
----
-------
-----
-----
------
--
-在上面的代码中，我们为每个 Link 组件添加了一个 activeClassName 属性，并将其设置为 "active"。当链接与当前路由匹配时，React Router 将自动为其包装元素添加名为 "active" 的类。
设置包装元素
默认情况下，React Router 在 Link 或 IndexLink 组件周围创建一个 a 元素或 div 元素的包装器。如果需要为其他类型的元素设置激活类名，则可以通过 wrapperComponent 属性进行自定义。
例如，假设我们希望在菜单中使用 li 元素作为链接的包装元素，并在当前选项上添加类名 "active"。我们可以使用以下代码：
-- -------------------- ---- -------
------ - ---- - ---- -------------------
-------- ------------ -
------ -
-----
----
-----
------
---------------------
------------------------
-------------------- -------- -- -- --------------------
-
--
-------
-----
-----------
---------------------
------------------------
-------------------- -------- -- -- --------------------
-
----
-------
-----
-------------
---------------------
------------------------
-------------------- -------- -- -- --------------------
-
----
-------
-----
------
--
-在上面的代码中，我们使用 wrapperComponent 属性将 li 元素作为链接的包装元素，并将其传递给 Link 组件。当链接与当前路由匹配时，React Router 将自动添加 "active" 类名到 li 元素。
结论
通过设置 activeClassName 和 wrapperComponent 属性，我们可以轻松地为链接的包装元素添加自定义类名。这使得我们可以以一种简单而声明性的方式构建具有显示效果的导航菜单和其他 UI 元素。
希望本文能够帮助你在 React Router 中实现自定义链接样式！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/27707