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

最新推荐文章于 2023-12-25 14:03:35 发布
最新推荐文章于 2023-12-25 14:03:35 发布
阅读量465 收藏
点赞数
分类专栏： react
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Benz_s600/article/details/116203351
版权

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

恰好有你
关注
专栏目录
React Antd样式丢失解决方案：优化样式引入方式
ByteEchoX的博客
09-27 1278
在使用React Antd进行编程时，有时候可能会遇到样式丢失的问题，导致Antd组件在页面上没有正确的样式显示。在使用Antd时，我们需要正确引入其样式文件，以确保组件能够正确地显示样式。这种方式直接引入了整个Antd样式文件，但有时候由于项目的配置或打包工具的优化，样式文件可能无法正确加载，导致样式丢失。Antd提供了按需加载的方式，可以只引入需要的组件样式，而不是整个样式文件。为了使用按需加载样式，我们需要先安装。确保样式文件的路径正确，可以通过检查文件的相对路径或者使用绝对路径来引入样式文件。
React页面刷新样式丢失问题及解决方案
Hiroshi's
06-28 1976
我们把路由都变成二级路由，统一加上/dean/路由前缀 效果： 看着没什么问题，但是一旦刷新页面，样式就废了： 我们把路由恢复，看看bootstrap网络请求正常不正常： 我们发现bootstrap请求地址是http://localhost:3000/css/bootstrap.css，localhost:3000是本地服务器，webpack里面的webServer配置了public这个文件夹都是localhost:3000/根目录对应的位置 我们通过地址请求看看： 如果请求了一个不存
React页面刷新样式丢失
Answer3664的博客
08-09 705
代码】React页面刷新样式丢失。
react样式覆盖
qq_36262295的博客
07-13 708
antd-design样式覆盖 :global样式覆盖 // TestPage.less .customSelect { :global { .ant-select-selection { max-height: 51px; overflow: auto; } } } // TestPage.js import styles from './TestPage.less' ReactDOM.render( <Select mode="mul
React中解决样式丢失问题
Frank---7的博客
05-10 747
解决多级路径刷新页面样式丢失的问题 1.public/index.html 中 引入样式时不写 ./ 写 / （常用） 2.public/index.html 中 引入样式时不写 ./ 写 %PUBLIC_URL% （常用） 3.使用HashRouter
解决——多级路由下刷新页面样式丢失问题
最新发布
weixin_60932546的博客
12-25 461
多级路由下刷新页面样式丢失
react（41）——使用多重路径路由，刷新后，css样式丢失的问题
木子 旭的博客
03-18 435
1.问题代码 app的代码 import React, { Component } from "react"; import Div1 from "./components/div1"; import Div2 from "./components/div2"; import Page1 from "./pages/page1"; import Page2 from "./pages/page2"; import { Link, BrowserRouter, Route, NavLink, Switch
解决多级路径刷新页面样式丢失的问题
信念之于人，犹翅膀之于鸟，信念是飞翔的翅膀
04-30 295
由于使用二级路由导致访问css出错 第一种方法 去掉 相对路径 <link rel="stylesheet" href="./css/bootstrap.css" /> 转换成 <link rel="stylesheet" href="/css/bootstrap.css" /> 转换成绝对路径 <link rel="stylesheet" href="%PUBLIC_URL%/css/bootstrap.css" /> 使用HashRouter来设置路由 //
react路由的使用 react-router-dom 、二级路由的样式丢失问题、路由传参
weixin_44437816的博客
06-28 922
react路由的使用 react-router-dom 、二级路由的样式丢失问题、路由传参
react-router-dom的使用；react 路由实现的基本原理 和 浅谈前后端路由
FOR 的博客
09-01 518
react 路由学了好久，断断续续的，也开学了。忙这忙那。 呼呼 。终于学完这一章节了 内容有点多，5.1 的相关知识只是浅谈，需要深入了解可以找找其他博文。如果这里有不对请指正啦。 第五章 — react-router 5.1 相关知识 1. 浅谈网页发展 1.1后端渲染阶段 早期网页 早期网页是由 jsp/php 代码开发，基本是html和css 它的请求过程是输入网站后，发送到服务器，服务器会将完整的网页返回，也就是已经渲染完成的网页，包括一些图片资源等。 这个也就是后端渲染，即请求回来的即使渲染.
踩坑：解决：ant-design管理系统布局，左侧使用a-menu菜单时，每次刷新，菜单丢失状态，跳转到首页
weixin_45495316的博客
08-24 967
openkeys：打开的a-sub-menu，创建路由时，meta对象中存储module: "服务资源"，使用时读取。找了好几篇文章，但是属性和新的ant-design属性都不一样，特此记录一下！selectedKeys：菜单每次选中的属性，存储当前的router.path。效果：刷新后停留在当前menu。
页面刷新样式丢失问题
yeee1128的博客
04-14 1378
有些公共样式文件放在publish文件夹下，在index.html中引入样式文件，有时页面刷新样式丢失。 解决办法： 1.<link type="text/css" rel="styleSheet" href="/reset.css" /> //href路径不要写相对路径，类似于‘./reset.css’ 2.<link type="text/css" rel="styleSheet" href="%PUBLIC_URL%/reset.css" /> //加%PUBLIC_
react引入Ant Design后样式显示不出来
qq_53768302的博客
09-03 1483
确认项目已经按照官方文档教程都搭建好了，该下载的也都下载了，本来一切正常的事情，在我解决其他问题的时候，样式就突然不显示了，界面乱的一团糟，看下图 这次也是改了好多地方，不过都不太好使，最终解决办法： 在项目入口index.js里引入import 'antd/dist/antd.css';刷新一下好像就可以了。。。 又是督促自己吃核桃的一天。。。看效果 请忽略我的配色和样式，后期会调的，相信我 ...
REACT -＞ 解决多级路由模式下引入样式文件时刷新后样式丢失的问题
Un_YUI的博客
03-13 361
当我们使用多级路由如 <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封装文件预览组件
读心悦
04-05 1787
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 欢迎使用Markdown编辑器 你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Mar
React填坑之react-router刷新后报错解决方法
热门推荐
weixin_39168678的博客
03-30 1万+
react-router刷新后报错 之前按照各种教程用BrowserHistory（官方推荐，各种吹）实现了路由跳转 效果如下 结果一刷新就报错了，各种get不到页面….. 然后，查资料说BrowserHistory要配合服务器，然后将项目打包丢在nginx 上，然而，，然并卵并没有什么卵用，然后又查了下，说要是 当nginx找不到页面时让他去找我们配置好的页面 具体原因：...
Iview 导航栏刷新后样式丢失
06-13
2. 在导航栏组件中添加一个 key 属性，将其设置为一个唯一的值，这样每次刷新导航栏时，React 就会重新渲染组件并应用正确的样式。 3. 确保在导航栏组件中使用的样式类名与样式表中定义的类名一致，不要出现拼写错误...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值