ReactRouter中NavLink的activeClassName不生效

[版权声明] 本站内容采用知识共享署名-非商业性使用-相同方式共享 3.0 中国大陆 (CC BY-NC-SA 3.0 CN) 进行许可。
部分内容和资源来自网络，纯学习研究使用。如有侵犯您的权益，请及时联系我，我将尽快处理。
如转载请注明来自： Broly的博客，本文链接： ReactRouter中NavLink的activeClassName不生效

这两天做项目碰到个坑，用React Router的NavLink做个导航栏，结果发现activeClassName或者activeStyle怎么都不生效。

为了调试这个问题，反复折腾了好久，搜也搜不到答案。后来创建了个新项目，复制同样代码，一点点排除问题。

结果发现，居然是VSCode的锅！

如果命令行直接yarn start启动，是完全没有问题的；

然而我开发是通过用VSCode的launch.json启用的，配置文件如下：

{
    // 使用 IntelliSense 了解相关属性。 
    // 悬停以查看现有属性的描述。
    // 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "Start",
            "program": "${workspaceFolder}/scripts/start.js"
        }
    ]
}

{

// 使用 IntelliSense 了解相关属性。

// 悬停以查看现有属性的描述。

// 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387

"version": "0.2.0",

"configurations": [

{

"type": "node",

"request": "launch",

"name": "Start",

"program": "${workspaceFolder}/scripts/start.js"

}

]

}

这种启动方式就不行。

注：yarn build编译结果不会受影响，仅开发的时候activeClassName不会生效。

所以临时解决之道就是用命令行yarn start，再进行开发，暂时还没找到完美的解决方法。

如果本文对您有所帮助，可以请作者喝杯咖啡，感谢支持^_^

支付宝支付

微信支付

学无止境 | 强者之心