解决样式丢失问题的三种方案

问题描述：在路径上加上前缀，在访问页面之后，刷新一下页面，样式则会丢失。

原因：刷新页面之后，获取样式的URL中多了一个自己手动添加的路径前缀，而在获取样式的URL中并不存在这个前缀，从而导致样式丢失

正确情况下的样式路径：

 

错误情况下的样式路径

 

 

解决方案一：

在脚手架中的public文件夹内修改index.html中的导入样式的路径

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

改为：

 

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

 

解决方案二：

  <link rel="stylesheet" href="%PUBLIC_URL%/css/bootstrap.css" />

 

解决方案三：

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <HashRouter><App /></HashRouter>
);