反應路由器沒有加載刷新嵌套頁面的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

回答

相關問題