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

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

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

• 解决方法：
• 使用 绝对路径

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

• 使用 %PUBLIC_URL%

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

• 使用 HashRouter : 因为 hash 是不会改变路径的，也不会包含在请求URL中，因此不会影响相对路径

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