web-dev-qa-db-ja.com

React-routerが更新時にネストされたページのCSSをロードしない

最初のReact webappに_react-router_を設定しようとしています。ページを更新するときにネストされたページの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')
);
_

なぜか？

cssreactjsreact-router
21
Adetiloye Philip Kehinde

私もこの問題を抱えていました。私のアプリがスタイルシートなどをロードしていませんでした。ただし、アセットをindex.htmlエントリポイントに直接インポートしていました。

このドキュメント に従ってリンクを絶対パスに置き換えることで、私の問題は解決しました。

私にとって、これは変化することを意味しました

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

これに：

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

同じことがあなたのインポートステートメントでうまくいくかどうかはわかりませんが、一撃の価値はあります。

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

36
sonarforte

それを見つけた！

HTML要素を追加します。

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

インデックスページに追加して、URLのベースケースを設定します。

12
Sequential

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;
_

パブリックフォルダーへのアセットの追加

パブリックフォルダを使用する場合

3
ninjaas

追加した

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

私のindex.html頭に

そしてそれは解決されます。

2
mini yang

私は少し古いスレッドを知っていますが、私の解決策をここで共有することはできません。 _create-react-app_の代わりにwebpackを使用するセットアップのソリューションです。

他のすべての解決策が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
}
_

それが誰かを助けることを願っています。ありがとう！

1
Siddhartha Chowdhury

404エラーのため、スクリプトはCSSをロードしていません。ウェブサーバーがすべてをリダイレクトしていません/components/*インデックスファイルをリクエストし、reactを介してビューにルーティングします。

しかし、今、具体的にはcssの問題を修正することについて...以前は、jsxファイルでのcssのインポートに苦労していたので、あなただけではありません:)代わりに、SASSまたはLESSを使用してcssをコンパイルすることを選択しましたbundle.css gruntまたはgulpを含むファイル。次に、それをロードしますbundle.css直接私のindex.htmlファイル。 CSSコンパイラの使用に関する1つのきちんとしたトリックは、.scssまたは.lessファイルを変更するたびに、bundle.cssが更新されます。

私があなたを正しい方向に向けたといいのですが。

乾杯、

0
JorgeObregon