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

最新推荐文章于 2023-05-29 16:31:37 发布
最新推荐文章于 2023-05-29 16:31:37 发布
阅读量2k 收藏 4
点赞数 3
分类专栏： react 文章标签： react
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/dyw3390199/article/details/118297946
版权

我们把路由都变成二级路由，统一加上/dean/路由前缀
在这里插入图片描述
效果：
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
看着没什么问题，但是一旦刷新页面，样式就废了：
在这里插入图片描述

我们把路由恢复，看看bootstrap网络请求正常不正常：
在这里插入图片描述

我们发现bootstrap请求地址是http://localhost:3000/css/bootstrap.css，localhost:3000是本地服务器，webpack里面的webServer配置了public这个文件夹都是localhost:3000/根目录对

最低0.47元/天 解锁文章
React Antd样式丢失解决方案：优化样式引入方式
ByteEchoX的博客
09-27 1588
在使用React Antd进行编程时，有时候可能会遇到样式丢失的问题，导致Antd组件在页面上没有正确的样式显示。在使用Antd时，我们需要正确引入其样式文件，以确保组件能够正确地显示样式。这种方式直接引入了整个Antd样式文件，但有时候由于项目的配置或打包工具的优化，样式文件可能无法正确加载，导致样式丢失。Antd提供了按需加载的方式，可以只引入需要的组件样式，而不是整个样式文件。为了使用按需加载样式，我们需要先安装。确保样式文件的路径正确，可以通过检查文件的相对路径或者使用绝对路径来引入样式文件。
解决React中刷新页面redux数据丢失
北冥の魚
10-16 5338
为什么要存储react-redux中的数据？ 当页面刷新之后，redux中的数据会回到初始值，之前存储到redux中的数据也就不复存在了。废话不多说，直接上代码： 在reducer文件中： let shopDetailInfo = sessionStorage.getItem(‘shopDetailInfo’)?JSON.parse(sessionStorage.getItem(‘shopDeta...
React页面刷新样式丢失
Answer3664的博客
08-09 757
代码】React页面刷新样式丢失。
React多级路径刷新页面样式丢失问题
小怪獸丶的糖的专栏
12-19 153
刷新后 解决办法 public/index.html中引入样式时不写./写/(常用) public/inex.html中引入样式不写./写%PUBLIC_URL%（常用） 使用HashRouter
关于react引入样式后，刷新后样式丢失
Benz_s600的博客
04-27 500
问题源头:在根路径下的index.html 引入了某个css 解决办法: 1.将引入的相对路径改为绝对路径 2.使用默认引入的方式 %PUBLIC_URL%/ 资源路径 3.将react的路由模式BrowserRouter修改为HashRouter
React - 解决多级路径刷新页面样式丢失问题的三种方法
小多的博客
12-27 644
<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 解决办法： 引入样式时不写 ./
页面刷新样式丢失问题
yeee1128的博客
04-14 1443
有些公共样式文件放在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（41）——使用多重路径路由，刷新后，css样式丢失的问题
木子 旭的博客
03-18 467
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 373
由于使用二级路由导致访问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中使用了antd中的menu组件，点击对应导航后会出现样式，但是页面刷新时，导航的样式会丢失，变成未选中状态单页面的内容不变，写出具体的解决措施实例
03-05
您好，对于您的问题，可以通过以下方式解决：在React中使用antd的menu组件时，可以将当前选中的导航项的key值存储在state中，然后在组件挂载时，通过判断当前路由与导航项的key值是否匹配，来设置导航项的选中状态。...
react项目css样式错乱，带来的思考
少油少盐不要辣
03-15 2264
1.为什么出现了错乱？ 起初，项目中的每个组件的样式使用less语法写的，为了避免编译后，出现样式覆盖的问题。元素的类名使用的是文件名打头 。后来，我引入了ant-desginUI框架。结果发现，由它带来的重置css样式，覆盖了我自己的css样式。 覆盖的根本原因是：我自己的css样式，是被webpack编译到main.css文件中的，由link标签引入的。而ant-desgin带来的css样式...
【bug】umi某个页面无法触发热更新
最新发布
天心天地生的博客
05-29 804
在使用umi项目开发过程中,发现某个页面无法触发热更新,其他页面可以。
react 路由导致的刷新页面样式丢失问题
weixin_44607531的博客
02-22 1033
如下是引入样式的代码 <link rel='stylesheet' href='./css/bootstrap.css'> 使用路由情况 <NavLink to='/one/other'>other</NavLink> <Route path='/one/other' component={Other}/> 原因分析 使用了类似多级路由的路由'/one/other'，请求样式时把前面的路径one也加入请求地址，而文件找不到，react默认会返
nextjs系列教程(八)：Layouts布局
harry的博客
04-18 3798
nextjs系列教程
React之解决使用antd后样式没有显示
Welkin_qing的博客
11-19 5896
文章目录一、问题详情二、解决办法 一、问题详情 今天重构一个项目时，发现，下载了antd的包但是antd的样式没有用上 在render函数中输出一个样式 const Login: FC<Props> = (): JSX.Element => { const handleOnFinish = useCallback((value: any) => { console.log(value) }, []) return ( <div className={
react项目解决浏览器窗口变化重新加载的问题
qq_43206280的博客
12-17 2450
useEffect, useState, useCallback解决浏览器窗口变化加载问题 初步接触react项目遇到很多问题，这里记录分享一下问题以及解决方法。 f12，切换移动端浏览模式，浏览器窗口变小，项目样式就乱了 需要手动刷新重新加载之后恢复正常. 为了解决这一问题，看了下文档，自己琢磨找到了解决办法。 1、首先全局layouts/index.jsx引入useEffect, useS...
React 页面刷新与组件卸载在setState时的区别
╮(╯_╰)╭ Don't expect me to reply to you in time
07-31 993
React 组件各生命周期中均没有对刷新事件的监听与响应，依赖原始的 window的 beforeunload的事件处理，具体实现如下 import React, { Component } from 'react'; export default class Demo extends Component { constructor(props) { super(props); this.state = {}; } componentDidMount() { ...
React-防止组件卸载时内存泄露
X1432564581的博客
07-03 1471
前阵子在开发过程中遇到了React-组件卸载时内存泄漏的问题，在这里记录一下： 问题描述 使用react开发的项目在切换页面的时候，报了下面这个错： Can’t perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous
解决react二级路由刷新后样式丢失问题
weixin_44524243的博客
03-31 1214
初学react，发现在写二级路由的时候有个问题，刷新后样式取不到了 比如：路由 <Route path='/home/index' component={Home} /> 可以发现这里是一个二级路由----也就是说url上面会追加home/index（这里和vue的稍微不一样哈） public里面我们这样引入css <link rel='./css/boot.css' /> 这里就有坑了 因为你引入的是本路径下的css–而react是会在你开的端口下去找public里面的文件。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值