問題タブ [isomorphic-javascript]

このリポジトリのスターター キットに大まかに基づいて、同形の React アプリを作成しました。本番コードのビルドには webpack を使用します。

つまり、本番コードを再構築せずに、サーバー上のいくつかの環境変数の値をブラウザーのクライアント コードに公開する必要があります。環境変数の値を変更し、何も再構築することなく、次のページの更新時にクライアントに影響を与えたいと考えています。そして、それを行うためにテストを複雑にしたくありません。

私はいくつかの解決策を見つけましたが、どれも素晴らしいものではありません:

1. Webpack の DefinePlugin を使用して、特定の環境変数の値を製品コードにハードコーディングします。ここで概説されているものと同様
2. 環境変数をクライアントにプルするためだけに API を構築します。
3. webpack システムの外部にある特別な .js ファイルを作成します。このファイルは、クライアントに提供される前に変更されるようにテンプレート化されます。おそらく、環境変数の値が「ウィンドウ」などの特別なグローバル変数に格納されている必要があります。

これらのアプローチの問題:

1. 拒否されました。これは私が望むことをしません。env 変数の値を変更すると、コードを再構築する必要があります。
2. 不必要に複雑。この API は他には必要ありません。めったに変化しない 2 つまたは 3 つの値を提供するためだけの API ですか? ロード時に API からできるだけ早く値が取り出されるようにするには、複雑さが必要になります。
3. まだ最も近いですが、ちょっとグロスです。避けられるのであれば、webpack/React/Flux システムの外に出たくありません。ウィンドウ オブジェクトで特別なグローバル変数を作成しても機能しますが、それらのグローバル変数を使用するコンポーネント/ストア/アクションのテストが複雑になります。

私は過去に 2 と 3 の両方を行ったことがありますが、これらのソリューションで本当に知的に満足したことはありません。

助言がありますか？これは一般的な/解決済みの問題のようです。たぶん私はそれを考えすぎているだけで、3が行く方法です.

同形の反応プロジェクトで React Router を使用しています。ルーターは動作していますが、URL を変換して同じハンドラーを使用する方法を知りたいと思っています。

例えば ​​：

/en/user => ハンドラは userComponent です

/fr/utilisateur => ハンドラは userComponent です

私は多くのドキュメントを読みましたが、私が見つけた唯一の解決策は、ルートの 3 つのブロックを作成することですが、より良い解決策が存在するはずだと思います。

ありがとう ！

反応ルーターを使用して、サーバー側の別のページからページをリダイレクトする必要があります。私が書いたコードはクライアント側で動作しますが、サーバー レンダーでは動作しません。ここでコードを見つけることができます：

https://github.com/jurgob/iso-login/blob/e26af0152896a949435db62549027b2683276db7/src/shared/components/LoginPage.js

これは/src/shared/components/LoginPage.js内のリダイレクト コードです。

ノート：

https://github.com/jurgob/iso-login/blob/e26af0152896a949435db62549027b2683276db7/src/shared/routes.jsを見ると

やった：

このコードは機能していますが、コンポーネント内でリダイレクトを行いたい

node.js を使用して同形の JavaScript アプリを実装し、反応する方法に関するこの簡単なチュートリアルに従っていました。コンポーネントを文字列にレンダリングするだけなので、サーバー側のレンダリングは私には明らかです。

ただし、コンポーネントで定義された機能をクライアント側にアタッチする方法がわかりません。チュートリアルには、main.jsファイル内に次のコンテンツが含まれています。

しかし、これはrequire関数を使用しており、チュートリアルのようにhtml内にスクリプトを単純に含めると、このrequire関数が使用できないためエラーが発生します。

私が見つけることができるすべてのチュートリアルがこれらのコンポーネントのサーバー側のレンダリングに関するものであることは本当にイライラしますが、クライアント側で反応コンポーネントを含める方法を無視しているようです. それは本当に明白で、本当に単純なものが欠けていますか?

ご協力いただきありがとうございます。

私はユニバーサルレンダリングが初めてです。私はエクスプレスでワイルドカードルートを持ってい/apiます.

次のようになります。

タイトルに ruh:server が含まれていることがわかるため、これはサーバーに正常に送信されます。

ページがロードされた直後に、サーバーがクラッシュして、events.js:82

をコメントアウトしReactDOMServer.renderToStringて html の参照を削除すると、サーバーがロードされてクラッシュしなくなります。

実行ReactDOMServer.renderToStringしてもそれを参照しない場合でも、サーバーは負荷時にクラッシュします。コメントアウトすると、サーバーが生き残ることができます。

これが私のwebpack構成です：

行などをコメントアウトするconst componentHTMLと、サーバーは実行されますが、普遍的にレンダリングされません。誰かが興味を持っているなら、私は問題を再現しようとすることができます

kirasoftによる react-starter-kit を理解しようとしていますが、ルートに「*」ワイルドカード ルートのエントリが 2 つあることに気付きました。なぜ 2 つあり、優先順位は何ですか? 最初のルートはアプリ全体を設定しているようで、次に 2 番目のルートはデフォルトのコンテンツ ハンドラを起動するようです...両方とも起動しますか?もしそうなら、2 つの間のロジックは何ですか?両方とも順番に起動して追加されますか?どういうわけか応答で一緒に？

クライアントに渡す前に、サーバー上で非常に単純なコンポーネントをレンダリングしようとしています。次のように gulp と babelify を使用して変換します。

コンポーネントはクライアント上で正常に動作します:

ただし、Express で Node.js のファイルを要求すると、予期しないトークンでサーバーがクラッシュします

コンポーネント ファイルの先頭で使用する古い方法を使用/** @jsx React.DOM */した場合、問題はありませんでした。

ルート：

どこが間違っていますか？