3

私の現在のserver.js：

let express = require('express');
let harp = require('harp');
let path = require('path');

let app = express();

app.use(express.static(__dirname + "/dist"));
app.use(harp.mount(__dirname + "/dist"));

let port = process.env.PORT || 3333;
app.listen(port, () => console.log("Listening on port " + port) );

// ... other routes for data fetching ...

// For browserHistory: https://github.com/reactjs/react-router/blob/1.0.x/docs/guides/basics/Histories.md
app.get('*', (req, res) => {
  res.sendFile(path.resolve(__dirname, 'dist', 'index.html'));
});

でナビゲーションを開始すると、これは正常に機能しmysite.com/ます。ただし、入力するmySite.com/someRouteと壊れます。具体的には、コンソールに以下が表示されます。

Resource interpreted as Stylesheet but transferred with MIME type text/html: "http://localhost:3333/dashboards/styles/normalize-3.0.3.min.css".
...
Uncaught SyntaxError: Unexpected token <
...

私の理解では、これを修正するには、サーバー側のレンダリングも実装する必要があります。それは正確ですか？もしそうなら、そのために必要な最小限の設定は何ですか? 私が見たすべてのガイドは、私が今行きたいと思っているよりもはるかに詳細です.

（依存関係をアップグレードしても問題ありません。） react: 0.14.7 react-router: 1.0.3

4

2 に答える 2

7

cssファイルが静的フォルダーにあり、ファイルのパスが以下のパス__dirname + "/dist"と一致し、アプリ内でナビゲートしていない/someRouteが、アドレスバーを介してブラウザーをそのアドレスに誘導していると仮定すると、問題はあなたがサービスを提供していることだと思いますcss ファイルを提供する必要がある場合は index.html。(ブラウザが報告したエラーは提供されましたが、そのリクエストに対するサーバーからの実際の応答は提供されませんでした。)

これは、ブラウザを に向けたことが原因ですmySite.com/someRoute。相対 URL を使用する場合、ブラウザ/someRouteはすべてのリクエストのルート パスと見なすようになりました。したがって、index.html ページでassets/css/mysite.css. ブラウザは実際に のリクエストを送信しsomeRoute/assets/css/mysite.cssます。これは、ブラウザのネットワーク タブで確認できます。

これを修正するには、baseタグをに設定/します<head>。これにより、ブラウザは相対 URL にパスを追加しないように指示されます。

例：

<head>
  <base href="/">
  <link >
</head>
于 2016-03-11T05:58:54.280 に答える
0

これはReact固有のようには見えませんが、詳細はありません...

index.html には、同じサーバーに保存されている CSS ファイルへの参照が含まれています。そのサーバーには、index.html を返す「*」のルーティング ルール セットがあります。したがって、そのサーバーでアクセスするすべての URL は index.html を返します。毎回。

静的リソースのリクエストを処理する別のルールを設定するか (別のフォルダーに入れるか)、別のサーバーからリソースを提供することができます。

于 2016-03-11T05:29:14.883 に答える