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

本文主要是介绍解决样式丢失问题的三种方案，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

问题描述：在路径上加上前缀，在访问页面之后，刷新一下页面，样式则会丢失。 原因：刷新页面之后，获取样式的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>
);

 

这篇关于解决样式丢失问题的三种方案的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！