React-router在刷新时不为嵌套页面加载css答案

【问题标题】：React-router not loading css for nested pages on refreshReact-router在刷新时不为嵌套页面加载css
【发布时间】：2017-03-18 11:37:44
【问题描述】：

我正在尝试为我的第一个 React webapp 设置 react-router，它似乎可以正常工作，只是刷新页面时我的嵌套页面没有加载 css。

但是它只适用于一个级别，例如/dashboard，但 /components/timer 的 css 不会加载

这是我的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')
);

知道为什么吗？

【问题讨论】：

当您重新加载时，这些 .css 文件是否会出现 404 错误？您的 Web 服务器是否将所有 / 和 /components/:name 指向您加载 react 和所有相关文件的 index.js？
@JorgeObregon 得到 404，它尝试将 css 和脚本加载为 http://localhost:3000/components/assets/js/jquery.slimscroll.js 而不是 http://localhost:3000/assets/js/jquery.slimscroll.js
@JorgeObregon 如何将我的网络服务器指向/components/:name？
这取决于您使用的网络服务器。 Apache 使用 .htaccess 文件来获得漂亮的链接，而 ExpressJS 使用 RegExp 来匹配您的路线
@AdetiloyePhilipKehinde 你是怎么解决这个问题的？

标签： css reactjs react-router

【解决方案1】：

我知道这很奇怪，但是如果您使用 history@5.0.0 ，请将其删除并安装 history@4.10.1 react-router 与历史版本 5 有许多不兼容之处。对我来说它有效。

【讨论】：

【解决方案2】：

最简单的解决方案在这里（只需要更改 index.html）

只需在每个 CSS 或 JS 文件之前使用%PUBLIC_URL%。

如果您通过create-react-app 创建了react 应用程序，您可以在index.html 文件中查看%PUBLIC_URL% 的示例。

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

有一点是必须的：你的 CSS 文件和 js 文件应该在公共目录下。

【讨论】：

【解决方案3】：

我加了

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

到我的 index.html 头

它已经解决了。

【讨论】：

【解决方案4】：

我知道它有点旧线程，但我在这里分享我的解决方案。它是使用webpack 而不是create-react-app 的设置解决方案。

我发现所有其他解决方案都建议更改 html 文件中的 <link 路径。但就像我的情况一样，webpack 处理资产链接。

我今天遇到了同样的问题。像/some_route 这样的路由可以工作，但 - /some_route/second_level 不能，在控制台中留下一条消息说明 -

Refused to apply style from 'http://localhost:8080/some_route/some_style.css'。

我通过更新我的 webpack.config.js 文件解决了这个问题

output: {
    filename: 'build.js',
    path: path.join(__dirname, '/dist'),
    publicPath: '/',         ////// <-- By adding this line
}

希望它可以帮助某人。谢谢！

【讨论】：

我没有看到 webpack,config.js
抱歉，这是webpack.config.js 的output 配置部分。 webpack.config.js 的其余部分不是主题

【解决方案5】：

如果您使用的是 create-react-app 工作流程，请将资产放在 public 文件夹下并使用特殊变量 PUBLIC_URL。

在 index.html 中使用 %PUBLIC_URL%：

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

在 JS/JSX 文件中使用 process.env.PUBLIC_URL:

render() { // Note: this is an escape hatch and should be used sparingly! // Normally we recommend using import for getting asset URLs // as described in “Adding Images and Fonts” above this section. return <img src={process.env.PUBLIC_URL + '/img/logo.png'} />; }

推荐方法：
通过将其与 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;

Adding assets to public folder

When to use public folder

【讨论】：

【解决方案6】：

我也遇到了这个问题，我的应用没有加载样式表等。但是，我将我的资产直接导入到我的 index.html 入口点。

通过将链接替换为this documentation 中的绝对路径，我的问题得到了解决。

对我来说，这意味着改变

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

到这里：

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

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

仅供参考，我正在使用来自 create-react-app 的项目布局。

【讨论】：

感谢 sonarforte，对于那些使用带有 html webpack plugin 的 Webpack 来生成 index.html 文件的人，我能够通过告诉 Webpack 在我的配置文件中放置输出文件的位置来解决这个问题。该对象看起来像这样：output: { publicPath: "/" }
为我工作！这一切都是为了删除路径前的点......

【解决方案7】：

找到了！

添加 HTML 元素：

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

到您的索引页面为您的 URL 设置基本情况，以便其他所有内容都遵循。

【讨论】：

截至 2020 年 10 月为我工作
nextjs 或任何文件夹结构架构的完美解决方案

【解决方案8】：

由于 404 错误，您的脚本未加载您的 CSS。您的网络服务器没有将所有 /components/* 请求重定向到索引文件，然后通过反应路由到您的视图。

但是现在，特别是关于解决您的 css 问题...过去，我一直在为 jsx 文件中的 css 导入而苦苦挣扎，所以您并不孤单 :) 相反，我选择使用 SASS 或 LESS使用 grunt 或 gulp 将我的 css 编译为 bundle.css 文件。然后将bundle.css 直接加载到我的index.html 文件中。使用 css 编译器的一个巧妙技巧是，每次您更改 .scss 或 .less 文件时，您的 bundle.css 都会更新。

希望我为您指明了正确的方向。

干杯，

【讨论】：

感谢 Jorge，但加载 bundle.css 并不能解决网络服务器没有将 /components/* 重定向到索引文件的问题？