如何根据路由改变header中svg图标的填充？

问题描述

如果我们在 activeClassName = 'current' 上，我正在尝试制作一个自动填充我的 svg 图标的系统，我使用 react-router-dom 进行导航，使用 react-icon 进行 svg 图标。我希望当用户在“主页”上时，svg 图标被填充，其他页面也一样。 在 ionicon v5（我用于图标）上有每个图标的填充和未填充格式，例如： 用于填充， 用于未填充。

import React from 'react';
import './Nav.css';
import { NavLink } from 'react-router-dom';
import * as Icon from 'react-icons/io5';

export default function Nav() {

    return (
        <header className="header">
            <div className="left">
                <NavLink exact to="/">
                    <h1 className="title">Lust</h1>
                </NavLink>
            </div>
            <div className="right">
                <NavLink exact activeClassName="current" to="/">
                    <Icon.IoHome /> // If we are in /
                </NavLink>
                <NavLink exact activeClassName="current" to="/profil">
                    <Icon.IoPersonCircle /> // If we are in /profil
                </NavLink>
                <NavLink exact activeClassName="current" to="/a-propos">
                    <Icon.IoinformationCircle /> // If we are in /a-propos
                </NavLink>
            </div>
        </header>
    )

}

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）