手动修改React带参数URL时CSS文件失效问题求助

问题原因 #

你在index.html里用相对路径href="css/style.css"引入CSS，当手动访问http://localhost:3000/overview/al这类嵌套路由路径时，浏览器会以当前URL的路径为基准，尝试请求http://localhost:3000/overview/css/style.css——但你的CSS实际存放在public文件夹下，正确的资源路径应该是网站根目录下的/css/style.css，所以找不到资源导致样式加载失败。

而通过组件内navigate方法跳转时，属于React Router的客户端路由跳转，页面不会重新刷新，浏览器始终以根目录为基准加载静态资源，因此CSS能正常加载。

解决方案 #

直接修改index.html中的CSS引入路径，将相对路径改为绝对路径：

<link rel="stylesheet" type="text/css" href="/css/style.css" media="all">

在css/style.css前添加斜杠/，强制浏览器从网站根目录定位资源，这样无论当前URL是嵌套层级多深的路由，都能正确找到CSS文件。

额外说明：你的路由配置中，overview父路由与子路由/:category共用Overview组件的写法没问题，只要组件内通过useParams()能正常读取category参数即可，这部分你已经确认功能正常，无需调整。

内容的提问来源于stack exchange，提问作者kostaskrav