React页面刷新样式丢失

Answerlzd

已于 2022-08-11 22:50:40 修改

阅读量707

点赞数

分类专栏： React 文章标签： react.js 前端 javascript

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

本文链接：https://blog.csdn.net/answer3664/article/details/126255867

版权

React 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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

摘要由CSDN通过智能技术生成

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

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

1298

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

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

Hiroshi's

06-28

1978

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

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

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

小怪獸丶的糖的专栏

12-19

134

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

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

wnk1997的博客

06-16

138

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

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

Nuygnix__的博客

01-09

236

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

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

小多的博客

12-27

602

<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 解决办法：引入样式时不写 ./

react（41）——使用多重路径路由，刷新后，css样式丢失的问题

木子旭的博客

03-18

440

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

299

由于使用二级路由导致访问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实现页面打开自动全屏展示_Redux 包教包会（一）：解救 React 状态危机

weixin_42144554的博客

01-24

743

前端应用的状态管理日益复杂。随着大前端时代的到来，前端愈来愈注重处理逻辑，而不只是专注 UI 层面的改进，而以 React 为代表的前端框架的出现，大大简化了我们编写 UI 界面的复杂度。虽然 React 提供了 State 机制实现状态管理，也有诸如“状态提升”等开发约定，但是这些方案只适用于小型应用，当你的前端应用有多达 10 个以上页面时，如何让应用状态可控、让协作开发高效成为了亟...

页面刷新后CSS失效

08-30

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

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

天行健，君子以自强不息

11-29

370

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

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

xiaojian044的博客

12-16

632

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

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

Benz_s600的博客

04-27

468

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

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

Un_YUI的博客

03-13

363

当我们使用多级路由如 <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

261

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

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

凯凯的博客

10-19

399

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

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

qq_36728971的博客

01-08

1541

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

react 页面刷新