2

このドキュメントは、 react -router 2 を使用して、サーバー側で get、post、put などのさまざまなタイプの http リクエストで反応コンポーネントをレンダリングする方法を理解するには十分ではありません。

4

1 に答える 1

3

サーバー側で反応と反応ルーターアプリケーションをレンダリングする方法を詳細に書くことは、非常に大きなトピックになる可能性があります。

あなたが経験豊富なユーザーであり、expressjs の使用方法と、react および react-router アプリの作成方法を知っていることを前提としています。

サーバー側をレンダリングする場合、個別のサーバー ルーターを作成して各フロントエンド ルートをマップするか、すべての URL を取得するサーバー ルーターを作成できます。

後者の場合、必要なサーバー ルーターは 1 つだけです。サーバー ルーターの下部 (エラー ルートの前) に次のように記述します。

app.use('/*', function(req, res){ ... });

このルートはすべての URL をキャッチします。

まず、url に関する情報が必要です。プロトコルやドメインに関する情報は必要ないため、これだけが必要です。

var url = req.originalUrl;

以下から取得するメソッド (POST、GET、PUT、DELETE) に関する情報:

var method = req. method

必要に応じて、別のルートを作成できます。次のようになります。

app.post('/something', function(req, res) {...});
app.get('/something', function(req, res) {...});

それはどうでもいい事です。

次に、react-router にブラウザ履歴を使用しません! メモリ履歴を使用する必要があります。

履歴オブジェクト:

var history = createMemoryHistory(req.originalUrl || '/');

そして、履歴オブジェクトをルーターに渡します。

パラメータ履歴オブジェクトとして受け入れるルート コンポーネントを作成するのが好きです。また、フロントエンドで使用する場合はブラウザー履歴を渡し、サーバー レンダーで使用する場合はメモリ履歴を渡します。

以下は、サーバー側のレンダリング ルートがどのように見えるかという非常に単純な例です (私は ejs テンプレートも使用しました)。

router.use('/*', function(req, res){
  var history = createMemoryHistory(req.originalUrl || '/');
  var initialState = {};
  //do something with initialState according to url and request method
  var staticHTML = ReactDOMServer.renderToString(
    React.createFactory(App)({
      history,
      initialState
    })
  );

  res.render('index', {
    staticHTML,
    initialState: JSON.stringify(initialState)
  });
});

この例では、ユーザーの URL とリクエスト メソッドに基づいて initState を設定する必要があります。そして、あなたのアプリはその初期化データを使い始める必要があります。

Redux を使用すると、サーバー側のレンダリングも魅力的に機能します。1 つのストアと 1 つの初期状態オブジェクトがあるためです。その後、レンダリング中に基本的な値を渡すことができます。たとえば、オブジェクトのリストをレンダリングするときは、フロントエンドで取得し、init 状態に渡してからレンダリングします。次に、レンダリングされたページに値が含まれます。

私は react+react-router+redux+redux-react-router+expressjs の例で作業しています。完全には準備ができていませんが、機能し、サーバーレンダリングをどのように解決したかを見ることができます:

https://github.com/uhlryk/my-express-react-seed

于 2016-03-13T14:15:05.130 に答える