Question

我试图为我的第一个React webapp设置一个react-router，它似乎正在工作，除了当我刷新页面时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')
);

知道为什么吗？

Answer 1

我也有这个问题，我的应用程序没有加载样式表等。但是，我将我的资产直接导入我的<div class="panel panel-primary"> <div class="panel-heading"> <h2>Resultados para <i style="color: wheat;">"<%= @busqueda %>"</i></h2> </div> <div class="panel-body"> <br> <h4 class="h4class" style="color: wheat">Articulos encontrados: <%= @rposts.size %></h4> <% if @rposts.size > 0 %> <%= @rposts.each do |post| %> <%= link_to post do %> <h5><%= post.titulo %>.</h5> <% end %> <p><small><%= content_with_emoji(truncate(post.contenido.html_safe, :length => 250)) %></small></p> <% if (post.contenido.length > 250) %> <%= link_to "Ver más", post%> <% end %> <hr> <% end %> <% end %> </div> </div>入口点。

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

对我而言，这意味着改变

index.html

到此：

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

我不确定相同的东西是否适用于您的导入语句，但值得一试。

仅供参考我使用<head> <link rel="stylesheet" href="/style.css" ></link> </head>的项目布局。

Answer 2

发现它！

添加HTML元素：

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

到你的索引页面为你的URL设置一个基本案例，所以其他一切都将在套件之后。

Answer 3

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

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

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

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

必须做的一件事：您的CSS文件和js文件应位于公共目录下。

Answer 4

我添加了

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

到我的index.html头

解决了。

Answer 5

如果您使用的是create-react-app工作流程，请将资源放在公用文件夹下并使用特殊变量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

Answer 6

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

但是现在，特别是关于修复你的CSS问题......过去，我在jsx文件中使用css导入很困难，所以你并不孤单:)相反，我选择使用SASS或LESS用crunt或gulp将我的CSS编译成bundle.css文件。然后将bundle.css直接加载到我的index.html文件中。使用css编译器的一个巧妙方法就是每次更改.scss或.less文件时，bundle.css都会更新。

希望我指出你正确的方向。

干杯，

Answer 7

我知道它的线程有点旧，但是在这里我不能分享我的解决方案。这是使用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
}

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

Answer 8

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

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

8 个答案: