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

最新推荐文章于 2025-04-11 19:11:11 发布
最新推荐文章于 2025-04-11 19:11:11 发布
阅读量130 收藏
点赞数 2
分类专栏： react 文章标签： 前端 react.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/bbt953/article/details/145324238
版权

1、public/index.html中引入样式时不写./，写 / (常用)
2、public/index.html中引入样式时不屑./，写 %PUBLIC_URL%(常用)
3、使用hashRouter

【React】页面刷新后状态丢失的原因与解决方案
m0_48182769的博客
02-06 400
在 React 应用中，页面刷新后状态丢失是一个常见的问题。这主要是因为 React 的状态（state）是存储在内存中的，而页面刷新会导致内存被清空，从而导致状态丢失。以下是常见的原因及对应的解决方案。
解决多级路径刷新页面样式丢失的问题
信念之于人，犹翅膀之于鸟，信念是飞翔的翅膀
04-30 364
由于使用二级路由导致访问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打包问题，通过本地就可运行
qq1248409755的博客
12-28 1418
有人总是说打包之后要放到服务器上才能显示出页面本地是无法显示的，我发现不用部署也可以展示，在本地打包之后之所以没有出现内容是因为你的css和js没有找到这时候你只需要在webpack中配置下路径即可但是这样也很麻烦。还有一种简单的方式就是通过package.json但是这里注意你不能用css引入图片这样都会找不到，你要通过require引入图片加载尽来然后进行使用，这也算是一个缺点。配置如下 你只需要配置红框里这个即可，有空闲时间的小伙伴可以去试试。 ...
react项目部署到服务器上样式丢失
wangweiscsdn的博客
05-08 467
样式丢失
React——解决样式丢失问题
x1037490413的博客
09-10 1142
当我们要在路由前加前缀时，比如自己公司的名字或者什么，刷新页面时样式会丢失，打开控制台的网络选项卡却发现bootstrap已经请求回来了 请求地址本来应该是下图： 结果是这样 文件夹的路径本应该是根路径的css下的bootstrap.css 由于路径错了，会返回index.html 有三种解决办法 1.删除这个. ./和/的区别在于：./是相对路径，是在当前路径下去找 /是直接去localhost:3000/css/bootstrap 2.绝对路径 3.不改css的路径，将index.js中的路由改为
2022-03-19 学习记录--React-解决样式丢失问题
weixin_48850734的博客
03-27 1509
React-解决样式丢失问题
React多级路径刷新页面样式丢失问题
小怪獸丶的糖的专栏
12-19 150
刷新后 解决办法 public/index.html中引入样式时不写./写/(常用) public/inex.html中引入样式不写./写%PUBLIC_URL%（常用） 使用HashRouter
React页面刷新样式丢失问题及解决方案
Hiroshi's
06-28 2054
我们把路由都变成二级路由，统一加上/dean/路由前缀 效果： 看着没什么问题，但是一旦刷新页面，样式就废了： 我们把路由恢复，看看bootstrap网络请求正常不正常： 我们发现bootstrap请求地址是http://localhost:3000/css/bootstrap.css，localhost:3000是本地服务器，webpack里面的webServer配置了public这个文件夹都是localhost:3000/根目录对应的位置 我们通过地址请求看看： 如果请求了一个不存
React学习计划-React16--路由
我愿化作繁星
12-25 3445
三个不同的包发布在npm上：它们分别是：: 路由的核心库，提供很多的：组件，钩子: 包含所以内容，并添加一些专门用于DOM组件。例如等: 包含所以内容，并添加一些专门用于的API。例如等与版本相比，改变了什么？内置组件的变化：移除,新增等变为等新增多个hookuseParamsuseMatch等官方明确推荐函数式组件了！！！
React 路由详解(超详细详解)
m0_67266042的博客
02-28 1112
React React 路由 对SPA的理解 1.单页Web应用（single page web application，SPA）。 2.整个应用只有一个完整的页面。 3.点击页面中的链接不会刷新页面，只会做页面的局部更新。 4.数据都需要通过ajax请求获取, 并在前端异步展现。 路由的理解 1.什么是路由 1.一个路由就是一个映射关系(key:value) 2.key为路径, value可能是function或component 2.路由分类 1.后端路由： 1)理解： value是fun
React 全家桶
LouYQ0213的博客
10-13 2193
文章目录前言一、React是什么？二、基础内容1. React 相关 js 库2. React 开发者调试工具3. JSX语法规则4. 模块与组件、模块化与组件化5. 类的基本知识三、React 面向组件编程1. 函数式组件2. 类式组件3. 组件实例的三个核心属性： state、refs、props- state- props- refs （注意 ref 与 refs）4. React 中的事件处理5. 受控组件 与 非受控组件6. 高阶函数 - 函数柯理化7. 组件生命周期8. 虚拟DOM 与
webpack打包后部分css样式丢失问题
G-shitou的博客
08-30 3868
最近在打包Vue项目之后，发现css中有部分代码消失了，查阅网上类似的问题，依次试了试，终于解决了。 首先尝试注释掉 webpack.prod.conf.js 中下面的代码，发现有一部分代码生效了，但是还是有css代码打包后丢失。 new OptimizeCSSPlugin({ cssProcessorOptions: config.build.productionSourceMap ...
react打包less样式没渲染
Cool的博客
12-21 3306
找到webpack.config.prod.js 在loaders增加   { test: /\.less$/, loader: ExtractTextPlugin.extract('style', 'css!less') },      
react项目打包后部分样式失效的原因
weixin_44481459的博客
06-24 3461
今天测试提了几个样式的bug,我在本地怎么都重现不了，最后连接测试服务器进行调试，发现确实存在问题，但是就有点蒙蔽，把样式和本地的进行了比对，最后发现是两个组件最外层的className命名冲突了。。。 在本地开发时，不同的组件会调用自己import的样式，在项目打包后，所有的css文件进行了压缩，部署后，相同类名的样式会相互冲突，所以我们在开发的时候一定要注意，在每个组件的最外层包上一个专属的className,这样就不会出现这种问题了 ...
微前端的不断探索之路—— qiankun 实战与思考！
喵手的博客
04-10 481
前端世界的技术更新频率就像是一场没有终点的马拉松，快到你刚熟悉一个框架，下一个趋势就已经掀起了新的浪潮。而近年来，微前端作为“架构界的顶流”，用它的灵活性和模块化特性给我们带来了全新的开发思路。今天，咱们就来聊聊微前端框架中的**“网红”选手**——qiankun。从它的基础概念到实战案例，再到我们在实际开发中的一些思考，希望带你更深地感受这个框架的魅力。qiankun是基于single-spa简单易用：开箱即用，几乎没有学习成本；完整性：解决了主流微前端框架的坑点，比如样式隔离、JS 沙箱等；
2.4、Vue2计算属性
GQL___的博客
04-11 640
使用Vue的原有属性，经过一系列的运算/计算，最终得到了一个全新的属性，叫做计算属性。Vue的原有属性: data对象当中的属性可以叫做Vue的原有属性。全新的属性: 表示生成了一个新的属性，和data中的属性无关了，新的属性也有自己的属性名和属性值。(1) 以上比较大小的案例可以用computed完成，并且比watch还要简单。所以要遵守一个原则：computed和watch都能够完成的，优先选择computed。(2) 如果要开启异步任务，只能选择watch。因为computed依靠return。
前端学习10—Ajax
最新发布
weixin_49157844的博客
04-11 557
XML（可扩展标记语言），被设计用来传输和存储数据，XML 和 HTML 类似，不同的是 HTML 中都是预定义标签，而 XML 中没有预定义标签，全都是自定义标签，用来表示一些数据比如有个学生数据：name = "孙悟空";age = 18;gender = "男";
vue3的router.ts中，在children和不在的区别
qq_62893228的博客
04-09 334
【代码】vue3的router.ts中，在children和不在的区别。
React下拉刷新和上滑加载组件优化解决方案
该组件能够较好地解决这一问题，提供更为流畅的用户体验。 - React框架下开发：由于该组件是为React框架编写的，这意味着它依赖于React的生命周期和组件状态管理机制。React开发者可以较为轻松地集成该组件到他们的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值