リフレッシュ時にネストしたページのCSSをロードしていない

最初のReact webappにreact-routerを設定しようとしていますが、ページをリフレッシュしたときにCSSがネストされたページに対してロードしない。リフレッシュ時にネストしたページのCSSをロードしていない

は、しかし、それだけで1つのレベル例えば/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を取得していますが、http：// localhost：3000/assets/assetsの代わりに 'http：// localhost：3000/components/assets/js/jquery.slimscroll.js'としてCSSとスクリプトをロードしようとします。 js/jquery.slimscroll.js' –

@JorgeObregonどのように私のWebサーバを '/ components /：name'に向けるのですか？ –

あなたのスクリプトは、404エラーのためにあなたのCSSを読み込んでいません。あなたのウェブサーバーは/components/*のインデックスファイルへのリクエストをリダイレクトしておらず、反応してあなたのビューにルーティングしていません。

しかし、あなたのCSSの問題を修正することについて具体的には...以前は、jsxファイルのCSSインポートに苦労していたので、あなたは一人ではありません:)代わりに、SASSまたはLESS私のCSSをbundle.cssファイルにコンパイルするには、gruntまたはgulpを使用します。次にファイルにbundle.cssを直接ロードしてください。 .ssssまたは.lessファイルを変更するたびに、bundle.cssが更新されます。

私は正しい方向にあなたを指摘しました。

乾杯、

出典

2016-11-04 16:04:35 JorgeObregon

Jorgeに感謝しますが、bundle.cssをロードしても、Webサーバーが '/ components/* 'をインデックスファイルにリダイレクトしないという問題は解決しませんか？ –

これが見つかりました！

HTML要素を追加します。

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

あなたのインデックスページへので他のすべてあなたのURLのための基本ケースを設定するには、スイートに従います。

出典

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文のために働くかどうか分からないが、それはショットの価値があります。

FYI create-react-appのプロジェクトレイアウトを使用しています。

出典

2017-06-25 03:04:02 sonarforte

create-react-appワークフローを使用している場合は、アセットをパブリックフォルダの下に置き、特殊変数PUBLIC_URLを使用します。

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

インサイドJS/JSXファイルはprocess.envを使用します。％PUBLIC_URL％index.htmlを使用インサイド

。PUBLIC_URL：SRCファイルと一緒にそれを置くことによって、
輸入スタイルシート、画像、JavaScriptからフォント：アプローチを推奨

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'} />; }

。あなたはリロード時に

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をロードしていない

答えて

関連する問題