React页面刷新样式丢失

原创已于 2022-08-11 22:50:40 修改 · 818 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#react.js #前端 #javascript

于 2022-08-09 21:18:02 首次发布

React 专栏收录该内容

1 篇文章

订阅专栏

本文针对在配置路由过程中遇到的样式丢失问题提供了三种有效解决方案：调整public/index.html中的样式引入路径，使用%PUBLIC_URL%替代相对路径，以及采用HashRouter替换BrowerRouter。

很有可能是在配置路由的时候随着链接的跳转，找不到之前的样式了。因此要看一下写的链接有没有问题，大概有以下三种解决方法：

public/index.html 中引入样式时不写 ./ 写 /

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

改为

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

public/index.html 中引入样式不写 ./ 写 %PUBLIC_URL%

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

用HashRouter代替BrowerRouter

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Answerlzd

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

React Antd样式丢失解决方案：优化样式引入方式

ByteEchoX的博客

09-27

1812

在使用React Antd进行编程时，有时候可能会遇到样式丢失的问题，导致Antd组件在页面上没有正确的样式显示。在使用Antd时，我们需要正确引入其样式文件，以确保组件能够正确地显示样式。这种方式直接引入了整个Antd样式文件，但有时候由于项目的配置或打包工具的优化，样式文件可能无法正确加载，导致样式丢失。Antd提供了按需加载的方式，可以只引入需要的组件样式，而不是整个样式文件。为了使用按需加载样式，我们需要先安装。确保样式文件的路径正确，可以通过检查文件的相对路径或者使用绝对路径来引入样式文件。

React页面刷新样式丢失问题及解决方案

Hiroshi's

06-28

2162

我们把路由都变成二级路由，统一加上/dean/路由前缀效果：看着没什么问题，但是一旦刷新页面，样式就废了：我们把路由恢复，看看bootstrap网络请求正常不正常：我们发现bootstrap请求地址是http://localhost:3000/css/bootstrap.css，localhost:3000是本地服务器，webpack里面的webServer配置了public这个文件夹都是localhost:3000/根目录对应的位置我们通过地址请求看看：如果请求了一个不存

参与评论您还未登录，请先登录后发表或查看评论

React多级路径刷新页面样式丢失问题

小怪獸丶的糖的专栏

12-19

182

刷新后解决办法 public/index.html中引入样式时不写./写/(常用) public/inex.html中引入样式不写./写%PUBLIC_URL%（常用）使用HashRouter

页面刷新后CSS失效

08-30

使用response.write容易页面刷新后CSS失效，文档中给出解决办法。

css刷新界面表格内某个图标样式有概率消失

wnk1997的博客

06-16

195

但是一刷新界面，表格内图标样式有概率消失，排查了半天，最后发现是表格有一列是v-if控制的，一开始为false，后面设置为true,表格的ref对象变化导致的，修改v-if初始值，不让v-if变化，这个问题就解决了。通过原生的方法根据样式名称找到对应的图标对象（图标对象返回的是个数组），然后给图标对象增加对应的样式。需求是这样的，组件库不支持表格表头图标的替换，需要些代码手动替换图标。

react中解决多级路由刷新页面样式丢失问题

Nuygnix__的博客

01-09

302

react中解决多级路由刷新页面样式丢失问题public/index.html 中引入样式时不写./写/public/index.html 中引入样式时不写./写。使用HashRouter。

React - 解决多级路径刷新页面样式丢失问题的三种方法

小多的博客

12-27

687

<NavLink to='/a/b'>跳转Home</NavLink> {/* 注册路由 */} <Route path='/a/b' component={Home}/> 原因：由于引用样式使用的是 ./ 的相对路径例如引入的样式路径为：./css/style.css （http://localhost:3000/css/style.css）刷新时会变为 http://localhost:3000/a/css/style.css 解决办法：引入样式时不写 ./

解决多级路径刷新页面样式丢失的问题

believet93的博客

03-25

277

尚硅谷老师笔记 1.public/index.html中引入样式时将“./” 改成 “/” （常用） 2.public/index.html中引入样式时将“./” 改成 “%PUBLIC_URL%” （常用） 3.使用HashRouter

四、【React-Router5】样式丢失问题

天行健，君子以自强不息

11-29

445

四、【React-Router5】样式丢失问题

React学习17（解决样式丢失路由的严格匹配路由的重定向）

xiaojian044的博客

12-16

697

解决多级路径刷新页面丢失样式的问题路由的严格匹配与模糊匹配 Redirect的使用

关于react引入样式后，刷新后样式丢失

Benz_s600的博客

04-27

540

问题源头:在根路径下的index.html 引入了某个css 解决办法: 1.将引入的相对路径改为绝对路径 2.使用默认引入的方式 %PUBLIC_URL%/ 资源路径 3.将react的路由模式BrowserRouter修改为HashRouter

REACT -＞解决多级路由模式下引入样式文件时刷新后样式丢失的问题

Un_YUI的博客

03-13

433

当我们使用多级路由如 <Switch> <Route path="/golo/home" component={Home}/> <Route path="/golo/about" component={About}/> </Switch> 自定义的路由组件 <Mynavlink to="/golo/home">HOME</Mynavlink> <Mynavlink to="/golo/about">ABOUT<

React-29：解决多级路由样式丢失的问题

臧小川的博客

08-22

299

给React加上多级路由之后，刷新页面有时候会造成样式的丢失。 1.去掉相对路径的点 2.在样式文件的路径前面加上%PUBLIC_URL% 3.将BrowserRouter改为HashRouter 因为哈希模式带# 就只到是前端路由就不会请求前端资源 ...

React笔记重定向后HTML引用的样式失效

凯凯的博客

10-19

475

React框架下，如果用BrowserRouter模式，HTML中的引用需以`/`开头，而非`./`。

JS实现改变当前选中单元格的背景色，离开后恢复原色

qq_36728971的博客

01-08

1596

var $lasttd;//上一个单元格变量 var lastcolor;//上一次颜色变量 $('.x-table td').click(function(){ if($lasttd){ $lasttd.css('background',lastcolor); } //离开后原单元格恢复原色 lastcolor=$(this)....

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

weixin_48850734的博客

03-27

1556

React-解决样式丢失问题

React中因相对路径而导致样式文件丢失的问题

kiku

10-26

843

一级路由样式丢失问题当我们在React写一级路由的时候如果地址path不是/about而是/flyShark/about这种的不是如下???? <NavLink to="/about" activeClassName="active">About</NavLink> <Route path="/about" component={About}></Route> 而是如下???? <NavLink to="/flyShark/about" activ

记录react项目中引入iframe通信问题以及请求多次问题