反应图标和反应路由器

Question

Context

i'm designing a navigation bar for my application and my proyect uses react-router and react-router-dom for managing routing and react-icons for icon retrieving.

Code

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

Problem

I'm trying to extrapolate activeStyle functionality of NavLink to my icon. Given that react-icons provides you with component as icons, i'm struggling with which approach should i use:

1. Should i wrapped in a HOC?
2. Should i encapsulate in a custom Hook?

Notes

I've tried with both approaches but can't get my head arround it. I've tried implementing useRef , useEffect while reading to location with useLocation hook as well. Any suggestion for a better implementation of a generic NavIcon feature taking this context into account?

Answer 1

By using curly brackets you are importing the icon as a named import. So the import only works if the file contains a named export of the same name you have assigned it. See this question for more info.

According to the package documentation , this is the correct way to import an icon. Can you check to make sure the named export is the same as you have imported?