React-router在刷新时不为嵌套页面加载css
Posted
技术标签:
【中文标题】React-router在刷新时不为嵌套页面加载css【英文标题】：React-router not loading css for nested pages on refresh 【发布时间】：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 你是怎么解决这个问题的？
【参考方案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 />;
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/* 重定向到索引文件的问题？以上是关于React-router在刷新时不为嵌套页面加载css的主要内容，如果未能解决你的问题，请参考以下文章
react-router browserHistory刷新页面404问题解决方法
带有 BrowserRouter / browserHistory 的 React-router 在刷新时不起作用