ReactJS页面CSS加载异常求助：多级路径下CSS失效

核心原因是你在public/index.html中引入CSS时使用了相对路径，导致多级路径下浏览器解析的资源路径错误。

举个例子：

• 如果你写的引入代码是 <link rel="stylesheet" href="style.css">
• 访问单级路径http://localhost:3000/username1003时，浏览器会请求http://localhost:3000/style.css，这正好对应public文件夹下的CSS文件，所以加载正常。
• 访问两级路径http://localhost:3000/user/username1003时，浏览器会错误地请求http://localhost:3000/user/style.css，这个路径不存在，自然加载失败。

解决方法 #

• 改用根相对路径：在CSS的href开头添加斜杠，写法为 <link rel="stylesheet" href="/style.css">。斜杠代表网站的根目录，无论当前处于几级路径下，浏览器都会直接从http://localhost:3000/根目录去查找CSS文件，完全匹配public文件夹的资源位置。

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