React-icons и React Router

Question

Контекст

Я разрабатываю панель навигации для своего приложения, и мой проект использует response -router и response -router-dom для управления маршрутизацией и иконки реакции для извлечения значков.

Код

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

Проблема

Я пытаюсь экстраполировать activeStyle функциональность NavLink на мой значок. Учитывая, что response-icons предоставляет вам компонент в виде значков, я борюсь с тем, какой подход использовать:

1. Должен ли я быть завернутым в HOC?
2. Должен ли я инкапсулировать в кастомный хук?

Заметки

Я пробовал использовать оба подхода, но не могу обойти его. Я пробовал реализовать useRef, useEffect при чтении в местоположение с помощью хука useLocation. Есть ли какие-нибудь предложения по лучшей реализации общей функции NavIcon с учетом этого контекста?

Answer 1

Используя фигурные скобки, вы импортируете значок как именованный импорт. Таким образом, импорт работает, только если файл содержит именованный экспорт с тем же именем, которое вы ему присвоили. См. Этот вопрос для получения дополнительной информации.

Согласно документации пакета, это правильный способ импорта значка. Можете ли вы проверить, совпадает ли именованный экспорт с импортированным?