2022-03-19 学习记录--React-解决样式丢失问题

React-解决样式丢失问题

一、前言

出现该问题的情况：当路由的路径是多级结构，且 刷新页面，就会产生样式丢失问题。

• 多级路由结构举例，见下图：
  

二、解决方法

第一种解决方法：引入bootstrap.css时，去掉href里最前面的.

即👇

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

第二种解决方法：引入bootstrap.css时，将href里最前面的.改成%PUBLIC_URL%

【%PUBLIC_URL%代表代码里public的绝对路径】

即👇

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

第三种解决方法：将路由器BrowserRouter改成HashRouter，但是HashRouter的url地址里会有#符

三、总结

• 前两种方法是修改public -> index.html里的引入样式的路径
• 第三种方法是修改index.js里的路由器【这种方法很少见，因为我们路由器一般还是用BrowserRouter】

• 解决多级路径刷新页面样式丢失的问题
  • 1.public/index.html 中 引入样式时不写 ./ ，而写 / （常用）
  • 2.public/index.html 中 引入样式时不写 ./ ，而写 %PUBLIC_URL% （常用）【第二种方法只适用于react脚手架】
  • 3.使用HashRouter路由器

These are bilibili尚硅谷React学习视频的 学习笔记~