React路由器在刷新时未加载嵌套页面的css_Css_Reactjs_React Router

React路由器在刷新时未加载嵌套页面的css

css reactjs

React路由器在刷新时未加载嵌套页面的css,css,reactjs,react-router,Css,Reactjs,React Router,我正在尝试为我的第一个react Web应用程序设置一个react路由器，除了刷新页面时没有加载嵌套页面的css之外，它似乎正在工作但是，它只适用于一个级别，例如/dashboard，但是css不会加载/components/timer 下面是我的index.jsx文件的外观 import './assets/plugins/morris/morris.css'; import './assets/css/bootstrap.min.css'; import './assets/css/cor

我正在尝试为我的第一个react Web应用程序设置一个

react路由器

，除了刷新页面时没有加载嵌套页面的css之外，它似乎正在工作

但是，它只适用于一个级别，例如

/dashboard

，但是css不会加载

/components/timer

下面是我的

index.jsx

文件的外观

import './assets/plugins/morris/morris.css';
import './assets/css/bootstrap.min.css';
import './assets/css/core.css';
import './assets/css/components.css';
import './assets/css/icons.css';
import './assets/css/pages.css';
import './assets/css/menu.css';
import './assets/css/responsive.css';

render(
  <Router history={browserHistory}>
    <Route path="/" component={Dashboard}/>
    <Route path="/components/:name" component={WidgetComponent}/>
    <Route path="*" component={Dashboard}/>
  </Router>,
  document.getElementById('root')
);

import./assets/plugins/morris/morris.css'；
导入“./assets/css/bootstrap.min.css”；
导入“/assets/css/core.css”；
导入“/assets/css/components.css”；
导入“./assets/css/icons.css”；
导入“/assets/css/pages.css”；
导入“/assets/css/menu.css”；
导入“/assets/css/responsive.css”；
渲染(
,
document.getElementById（'root'））
);

知道为什么吗？

由于404错误，您的脚本没有加载css。您的Web服务器没有将所有

/components/*

请求重定向到索引文件，然后通过react路由到您的视图

但是现在，特别是关于解决css问题。。。在过去，我一直在为jsx文件中的css导入而挣扎，所以你并不孤单：）相反，我选择使用SASS或更少的工具将css编译成带有grunt或gulp的

bundle.css

文件。然后将

bundle.css

直接加载到我的

index.html

文件中。使用css编译器的一个巧妙技巧是每次更改.scss或.less文件时，

bundle.css

都会得到更新

希望我给你指明了正确的方向

干杯，找到了

添加HTML元素：

<base href="/" /> <!-- for local host -->

到您的索引页，为您的URL设置一个基本大小写，以便所有其他内容都将跟随该套件

我也有这个问题，我的应用程序没有加载样式表之类的东西。然而，我将我的资产直接导入我的

index.html

入口点

通过按照将链接替换为绝对路径，我的问题得到了解决

对我来说，这意味着改变

<head>
    <link rel="stylesheet" href="./style.css" ></link>
</head>

为此：

<head>
    <link rel="stylesheet" href="/style.css" ></link>
</head>

我不确定同样的方法是否适用于您的导入语句，但值得一试

仅供参考，我正在使用

create react app

中的项目布局。如果您正在使用create react app工作流，请将资产置于公用文件夹下，并使用特殊变量public\u URL

<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">

在index.html内部使用%PUBLIC\u URL%：

在JS/JSX文件中使用process.env.PUBLIC\u URL:

render（）{
//注意：这是一个逃生舱，应谨慎使用！
//通常，我们建议使用导入来获取资源URL
//如本节上文“添加图像和字体”所述。
返回；
}

推荐方法：
通过将JavaScript与src文件放在一起，从JavaScript导入样式表、图像和字体

import React from 'react';
import logo from './logo.png'; // Tell Webpack this JS file uses this image

console.log(logo); // /logo.84287d09.png

function Header() {
   // Import result is the URL of your image
   return <img src={logo} alt="Logo" />;
}

export default Header;

从“React”导入React；
从“./logo.png”导入徽标；//告诉Webpack此JS文件使用此图像
console.log（徽标）；///logo.84287d09.png
函数头（）{
//导入结果是图像的URL
返回；
}
导出默认标题；

我知道这是一个有点旧的思路，但我会在这里分享我的解决方案。这是一个使用

webpack

而不是

create react app

的安装解决方案

<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">

我发现所有其他解决方案都建议更改我添加的


<base href="/" /> <!-- for local host -->



到我的index.html头
最简单的解决方案就在这里（只需更改index.html）
只需在每个CSS或JS文件之前使用%PUBLIC\u URL%

如果通过create react app
创建react app，则可以在index.html
文件中检查%PUBLIC\u URL%
的示例
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">



有一件事是必须的：您的CSS文件和js文件应该在公共目录下。我知道这很奇怪，但是如果您使用history@5.0.0，将其删除并安装history@4.10.1
react路由器与历史版本5有许多不兼容之处。
对我来说，它起作用了。
当你重新加载这些.css文件时，你会得到404吗？您的web服务器是否将所有/
和/components/：name
指向您加载react和所有相关文件的index.js，它尝试将css和脚本加载为http://localhost:3000/components/assets/js/jquery.slimscroll.js
而不是http://localhost:3000/assets/js/jquery.slimscroll.js
@jorgobregon如何将我的Web服务器指向/components/：name
？这取决于您使用的Web服务器。Apache使用.htaccess文件创建漂亮的链接，而ExpressJS使用RegExp来匹配routes@AdetiloyePhilipKehinde您是如何解决这个问题的？谢谢Jorge，但是加载bundle.css无法解决Web服务器不将/components/*
重定向到索引文件的问题？谢谢sonarforte，对于那些使用带有HTMLWebpack插件的Webpack来生成index.html文件的用户，我可以通过告诉Webpack在我的配置文件中放置输出文件的位置来解决这个问题。对象看起来是这样的：输出：{publicPath:“/”}
为我工作！这一切都是关于在路径之前删除点…从2020年10月开始对我起作用nextjs或任何文件夹结构架构的完美解决方案我没有看到网页config.jsSry，但这是webpack.config.js
的输出
配置部分。webpack.config.js的其余部分不是主题