反应路由器没有加载刷新嵌套页面的CSS

我想为我的第一个React webapp安装一个react-router，它似乎工作，除了当我刷新页面时，CSS不会加载我的嵌套页面。反应路由器没有加载刷新嵌套页面的CSS

但是它适用于只是一个e.g /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') 
);

任何想法，为什么？

来源

2016-11-04 Adetiloye Philip Kehinde

你对这些.css文件获得404当你重装？您的Web服务器是否将所有'/'和'/ components /：name'指向您的index.js，您在哪里加载反应和所有相关文件？ – JorgeObregon

@JorgeObregon得到404，它试图加载css和脚本作为'http：// localhost：3000/components/assets/js/jquery.slimscroll.js'而不是'http：// localhost：3000/assets/js/jquery.slimscroll.js' –

@JorgeObregon如何将我的webserver指向'/ components /：name'？ –

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

但现在，特别是关于修复你的css问题......在过去，我一直在与jsx文件中的css导入进行斗争，所以你并不孤单:)而是，我选择使用SASS或LESS用grunt或gulp将我的css编译成bundle.css文件。然后直接在我的index.html文件中加载bundle.css。关于使用css编译器的一个巧妙技巧是每次更改.scss或.less文件时，bundle.css都会更新。

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

干杯，

来源

2016-11-04 16:04:35 JorgeObregon

感谢Jorge，但加载bundle.css不会解决web服务器不会将'/ components/*'重定向到索引文件的问题吗？ –

发现它！

添加HTML元素：

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

到你的索引页设置为您的网址，以便其他人都将按照一套基本情况。

来源

2017-03-04 19:12:36 Sequential

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

按照this documentation替换绝对路径的链接，我的问题就解决了。

对于我来说，这意味着改变

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

这样：

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

我不知道，如果同样的事情会为你的import语句工作，但它是值得一试。

仅供参考我使用create-react-app的项目布局。

来源

2017-06-25 03:04:02 sonarforte

如果您正在使用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'} />; }

建议的方法：
导入样式表，图片，以及从JavaScript的字体将其置于与SRC文件一起。

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

来源

2018-02-22 18:49:45 ninjaas

反应路由器没有加载刷新嵌套页面的CSS

回答

相关问题