React JS中用Link标签替代a标签后CSS无法加载的问题

这问题大概率是CSS文件的相对路径解析错误导致的：
用<a>标签时浏览器会整页刷新，页面基准路径是网站根目录，相对路径的CSS能正确找到；但<Link>是客户端路由跳转，跳转后当前路由变为/about，相对路径会被解析成/about/css/xxx.css，自然找不到文件。

给你几个直接的解决办法：

• 把CSS引入改成绝对路径
  如果你在public/index.html里引入CSS，把原来的相对路径（比如./css/style.css）改成从根目录开始的绝对路径：

  <link rel="stylesheet" href="/css/style.css">
  

  这样不管当前路由是什么，都会从网站根目录加载CSS文件。

• 在React组件中直接import CSS
  放弃在html里直接引入，在根组件（比如App.js或Layout.js）里用import导入CSS：

  import './css/style.css';
  

  打包工具会自动处理路径，确保CSS始终能正确加载，不受路由影响。

• 确认React Router的基础路径配置
  如果网站部署在子路径下（比如example.com/my-site），给BrowserRouter加上basename属性：

  <BrowserRouter basename="/my-site">
    {/* 路由内容 */}
  </BrowserRouter>
  

  同时CSS路径也要对应调整成/my-site/css/style.css。

内容的提问来源于stack exchange，提问作者inżynier umair