【问题标题】：react-icons and react Router反应图标和反应路由器
【发布时间】：2020-09-30 04:34:16
【问题描述】：

上下文

我正在为我的应用程序设计一个导航栏，我的项目使用 react-router 和 react-router-dom 来管理路由和 react-icons 用于图标检索。

代码

import React from 'react';
import { NavLink } from 'react-router-dom';
import { MdAssessment } from 'react-icons/md'
import Styles from './NavBar.module.css' 

const NavBar = (props) => {

    return (
        <nav className={Styles.navBar}>
            {navIcon}
            <NavLink
                activeStyle={{ color : 'red' }}
                className={`${Styles.navBar__Dashboard} `}
                exact to="/">
                <MdAssessment />
            </NavLink>
            <NavLink
                activeStyle={{ color: 'red'  }}
                className={Styles.navBar__Requests}
                to="/requests">
                Requests
            </NavLink>
            <NavLink
                activeStyle={{ color: 'red'  }}
                className={Styles.navBar__Tasks}
                to="/tasks">
                Tasks
            </NavLink>
        </nav>
    )
}

export default NavBar

问题

我正在尝试将 NavLink 的 activeStyle 功能外推到我的图标。鉴于 react-icons 为您提供了作为图标的组件，我正在为应该使用哪种方法而苦苦挣扎：

我应该用 HOC 包裹吗？
我应该封装在自定义 Hook 中吗？

注意事项

我已经尝试了这两种方法，但无法理解它。我尝试在使用 useLocation 钩子读取 location 时实现 useRef、useEffect。考虑到这种情况，有什么建议可以更好地实现通用 NavIcon 功能？

【问题讨论】：

我刚刚在我的沙盒上测试了 react-icons，你可以在这里看到它codesandbox 并且图标采用了活动颜色。也许问题出在你的 CSS 上。
是的，我知道。我可以从父亲那里继承一些属性（如果不是全部的话）。我在这里的问题是尝试提供与其父组件完全不同的样式。我实际上尝试通过使用额外的道具传递图标组件，但感觉不对
对不起，我误解了这个问题。

标签： reactjs react-router react-icons

【解决方案1】：

通过使用大括号，您将图标作为命名导入导入。因此，仅当文件包含与您分配的名称相同的命名导出时，导入才有效。请参阅此question 了解更多信息。

根据package documentation，这是导入图标的正确方法。您可以检查以确保命名的导出与您导入的相同吗？

【讨论】：

泰勒，我在可视化图标方面没有问题，我担心的是我想用 Navlink 尽可能地“激活样式”它。我实际上是在实现 react-icons 之前完成的，我硬编码了 material-icons className 并只渲染了一个文本。在我的公共 HTML 文件中，我导入了军事图标 CDN。我现在正在尝试实现相同的目标，但是对于 react 图标，图标实际上是组件，因此图标现在似乎是我的 NavLinks 的子级。