• 问题原因:多级路径下,加载样式时,使用相对路径,在刷新时将多级路由也考虑在内
// 如下,样式路径 './' 导致加载资源时,需要参考当前路径,因此多级路由会影响资源的加载
 <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中,因此不会影响相对路径

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