1

反応ルーターを使用してルートを定義しています。そして、私は開発に create-react-appを使用しています。私の質問は、アドレスバーにサブページの URL を入力してアクセスしようとすると、開発ビルドでは機能しますが、製品ビルドでは機能しません。

本番ビルドをホストするために単純な高速サーバーを使用しています

var express = require('express'),
  app = express(),
  http = require('http'),
  httpServer = http.Server(app);

app.use(express.static(__dirname + '/build'));

app.get('/', function(req, res) {
  res.sendfile(__dirname + '/index.html');
});
app.listen(3001);
4

1 に答える 1

4

定義したすべてのルートに対して同じページを提供するように Web サーバーを構成するか、React でサーバー側のレンダリングを実装する必要があります。開発用 Web サーバーはおそらくそのように構成されていますが、本番用 Web サーバー (Apache? Nginx? 何か他のもの?) はそうではありません。この質問が役立つかもしれません。

これは、React がシングル ページ アプリケーションの構築に使用されているためです。いくつかのスクリプトをロードする従来の Web ページが 1 つあり、ビルド プロセスの出力である可能性が最も高く、それらのスクリプトが他のすべてを処理します。これには、新しい DOM の生成、データの「サーバー」へのリクエストの作成、ビューが変更されたときに URL を操作して複数ページのアプリの動作を偽装することも含まれます。この最後のビットは、react-router が行うことです。

ただし、Web サーバーは通常、これらのことを認識していません。彼らは URL を提供する方法を知っています。また、yourdomain.com/ をリクエストすると、そのメイン ページが表示されますが、yourdomain.com/some/page/123 をリクエストすると、特別に設定しない限り、何を表示するかわかりません。構成の 1 つは、これらの他の URL のメイン ページのコンテンツも返すことです。React-router は URL を取得し、適切なコンポーネントを使用するため、すべて問題なく表示されます。

于 2016-09-30T10:46:45.297 に答える