时间戳

首页 > 解决方案 > 反应图标和反应路由器

reactjs - 反应图标和反应路由器

问题描述

语境

我正在为我的应用程序设计一个导航栏，我的项目使用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 为您提供了作为图标的组件，我正在努力使用哪种方法：

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

笔记

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

标签： reactjsreact-routerreact-icons

解决方案

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

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

推荐阅读