React 学习笔记 —— 多级路由刷新页面时样式丢失问题

问题原因：多级路径下，加载样式时，使用相对路径，在刷新时将多级路由也考虑在内

// 如下，样式路径 './' 导致加载资源时，需要参考当前路径，因此多级路由会影响资源的加载
 <link rel="stylesheet" href="./test.css" />

解决的三种方法：

1. 使用 绝对路径
   public/index.html 中 引入样式时不写 ./ 写 / （常用）

 // 加载 根目录下的 test.css ，与当前路由无关
 <link rel="stylesheet" href="/test.css" />

2. 使用 %PUBLIC_URL%（此方法只有在react中有效）
   public/index.html 中 引入样式时不写 ./ 写 %PUBLIC_URL% （常用）

 // 加载 public 文件夹下的 test.css ，与当前路由无关
 <link rel="stylesheet" href="%PUBLIC_URL%/test.css" />

原理：使用绝对路径，即固定了是public下的test.css，并不会被变动。

3. 使用HashRouter

ReactDOM.render(
    <HashRouter>
        <App />
    </HashRouter>
    , document.getElementById('root'))

原理：因为 hash 是不会改变路径的，也不会包含在请求URL中，因此不会影响相对路径

总结：

样式丢失的原因是，加载资源时使用相对路径，而相对路径又会参考当前路由路径，因此导致加载不到资源，解决办法则是使用绝对路径等，让其加载资源时不再参考路由路径。