問題タブ [react-router]

次のようなルート構成があります (関連すると思われる部分のみを示しています)。

さて、設定の反応ファイルには、次のものがあります。

にアクセスしhost.local/settingsてログに記録this.getParams()すると、すべてが正常に機能し、ファイルがレンダリングObject {tab: undefined}されてコンソールに表示されます。しかし、試してみるとすぐにhost.local/settings/user-コンソールが次のようなものを返すと予想していたところObject {tab: 'user'}-、全体がどこかでクラッシュし、コンソールに投げ込み始めUncaught SyntaxError: Unexpected token <ます。

React はまだ開発が進んでいないため、多くの場合、エラーはかなりあいまいです。

Path Matching Guideで提供されている仕様に従っていますが、かなり標準的なように見えるので、react-router 自体に問題があるとしか思えませんか、それとも何か不足していますか?

アップデート

tl;dr: react-router の問題ではありません。

長いバージョン:

どうやら、問題は ReactJS にも React-Router 自体にもないことがわかりました。ほとんどの場合、gulp-webserver (並行して実行されている個別のプロジェクトを接続するためにプロキシを使用して開発するために使用しています) のバグが関係しており、URL がリンク経由ではなくブラウザーに直接入力されるとエラーがトリガーされます。

私はテストを行い、ナビゲート時には正常に動作しますが、この github issueで説明されているように直接アクセスするとクラッシュします。これにより、基本的に機能的なディープリンク テストが実行できなくなりますが、本番環境では動作するはずです。

更新 2

tl;dr: gulp-webserver でも問題ありません。

私の場合、パスに関連してrelativeおり、前述の gulp-webserver の問題ではありません。具体的に言うと、スクリプトと CSS の参照が絶対的であることを確認して、URL に入力しているパスでそれらを見つけようとしないようにする必要がありました。absolute

例えば：

と の 2 つの URL が/settingsあります/settings/account。その場合、フォールバック ファイルにスクリプトを含めると、 にファイルがない<script src="scripts/main.js"></script>ため、サーバーは 404 を返します/settings/scripts/main.js。

私はばかげていますが、他の誰かがそれに陥った場合に備えて、これが役立つことを願っています.

アプリケーションの 1 つで反応ルーターを使用しようとしています。しかし、得ています

オンライン

私が書いているコードは

必要に応じてお問い合わせください。ルート関連の js も提供します。

-- 編集 -- ビルド ファイルからの関連するエラー コード

React を react-router および Reflux と共にデータストアとして使用していますが、ページの更新を許可するために永続性を処理する最善の方法がわかりません。

私のコンポーネントは Reflux.connect を使用してストアに接続しますが、ストアはバックエンドからデータを取得するため、コンポーネントが最初に初期化およびレンダリングされるときはまだ使用できません。

ユーザーが最初からアプリに入ると、このすべてのデータが順番に読み込まれ、必要なときに利用できるようになりますが、ルートをさらに下ってページの更新をトリガーすると、react は、そうでないデータに依存するコンポーネントをレンダリングしようとします。まだあります。

LocalStorage に常にデータのコピーを保持し、それを Reflux ストア getInitialState() から提供することでこれを解決し、すべてのコンポーネントがレンダリング前にデータを取得できるようにしました。

これが正しい方法なのだろうか。何らかの理由でローカル ストレージ データが消去されたり破損したりすると、コンポーネントが正しいデータにアクセスできないため、インターフェイスが空白になります。サブ構造とプロパティが存在せず、javascript エラーが発生します。面倒で信頼できない解決策のようです。

これを解決するためにどのようなパターンが使用されているか知りたいです。

------編集----- WiredPrairieのコメントに答えるには：

1) getInitialState でデータを使用してコンポーネントを初期化するのはなぜですか?

私のコンポーネントが Reflux.connect を使用する場合、ストアがデータを取得する必要があるため、最初のレンダリングではまだデータが状態にありません。私のビューは現在、未定義のデータでは適切に機能しません。getInitialState() で Reflux ストアからローカルに保存されたキャッシュを返すことにより、接続されているすべてのコンポーネントは、最初のレンダリング呼び出しの前にそのデータを取得します。

2) ページが更新される原因と、最初と同じようにデータをロードできないのはなぜですか?

これは主に、編集時にページを更新する livereload を回避するために構築しなければならなかった回避策ですが (後で react-hotloader の使用を検討しますが、まだオプションではありません)、ユーザーはネストされたビューのどこかにいるときに更新を押すこともできます。それは同じ効果があります。手動で更新すると、開始時にアプリに入っていません。

3) コンポーネントがストアの変更イベントに関連付けられている場合、コンポーネントが更新されないのはなぜですか?

それらは更新されますが、私が言ったように、彼らは現在空のデータを処理しておらず、最初のレンダリングで、ストアが何かを取得するのを待ってそれを見逃すでしょう. すべてのビューを空のデータで正常に動作させることはできますが、それでは多くのボイラープレート コードが追加されます。

これまでの回答から、私が localStorage で行っていることは一般的な方法であると感じています。localStorage や sessionStorage などにローカルにキャッシュし、更新直後にそのデータを提供します。

localStorage が適切に機能しないという奇妙な機会に空のデータを適切に処理することで、ビューをもう少し堅牢にする必要があります。

現在、react / react-router を使用したサーバー側のレンダリングで奇妙な問題が発生していますが、これは単に理解できません。トランスパイルにBabel（6to5）でES6を使用しています

Server.js スニペット

Routes.js

出力

CONTENT はレンダリングされたコンポーネントを正しく出力します

CONTENT2 出力<noscript></noscript>

何らかの理由で、外部ファイルからルートをインポートすると (クライアント コードとサーバー コードの両方でルートを要求できるようになります)、サーバー側のレンダリングで正しい HTML が出力されません。

React todomvc 1からわかるように、UI がモデルに合わせて最新の状態に保たれるようにする 1 つの方法は、UI がすべての変更でレンダリングされるように、(以下に示すように) モデルを render 関数にサブスクライブさせることです。

アプリで React ルーターを使用する場合、このデモで示されているように、React.render 呼び出しをルーターでラップする必要があります。

では、モデルも更新する必要がある場合、Router をどのように使用しますか? React.renderつまり、ルーターとfunction render?の両方をラップする方法です。これにより、スコープに問題が生じます

I am trying to build a parallax website with react and react-router

In most react-router examples I found, target dom node is replaced with Handler corresponding to the route.

How can I render all the route handlers into single page and jump to specific location in a page with react-router ?

ES6 構文を ES5 に変更するだけで、ローカル マシンでReact-Router の例https://github.com/rackt/react-router/tree/master/examplesのいずれか (およびすべて) を実行しようとすると、同じエラーが発生し続けます同じコード行から生じる

コード

エラー

ES6 を使用して依存関係を宣言し、Router を分解する代わりに、例について何も変更していません。

インデックスにjsファイルへのリンクを含め、ルーターに対してこれを行いました

これは、 github からここに貼り付けられた ES5 バージョンのコードを使用した jsfiddle です。

これは、私が作業しようとしているES5/6の変更を含む完全なコードです

AJAX リクエストが不正な応答で返されたときに、ユーザーが次のような不正なページに送信されるようにしたいと考えています。

ミックスインを使用できることは知っていますがNavigation(これはまもなく削除されます)、特定のコンポーネントに関連付けられていないグローバル エラー ハンドラを作成するにはどうすればよいでしょうか?

Web アプリとreact-routerパッケージで遊んでいて、ネストされたルートをいくつか実行したいと考えています。これが私がやったことです

この例は、DefaultRoute のために機能しません。通常の Route コンポーネントに変更すると、すべて問題ありません。DefaultRoute にいくつかの子がある例が見つかりません。DefaultRoute はネストされたルートを持つことができますか? はいの場合、私が間違っていることは何ですか?

よし、reactjs、フラックス アーキテクチャ、react-router の問題で立ち往生しています。次のルートがあります（ルートの一部のみ）：

シニア プロファイル ビューは、個人のデータをロードする API 呼び出しを行います。[おすすめ] ビューに移動すると、個人の ID を使用して別の呼び出しが行われ、おすすめが読み込まれます。最初にプロフィール ページを実際に表示して、おすすめページに移動するとうまくいきます。しかし、ハードリロードを行うと、次のようになります。

これは、最初の API が戻った後にディスパッチが呼び出され、コンポーネントの更新が開始されるためです。レコメンデーション ページが終了する前に、その API を呼び出し、その結果をディスパッチしようとします。React.addons.batchUpdates はこれを修正する方法であるとフォーラムで読みましたが、それを機能させる方法がわかりませんでした。GitHub Batch Updates Issueと、同様のことについて説明している別のリンク hereを使用しようとしています。最初のものは、以下を追加してディスパッチャを調整することを推奨しています:

しかし、私はこれを機能させることができませんでした。多分私はそれを間違って実装しています。

Chat と TodoMVC の例を読みました。チャットの例で waitFor がどのように使用されているかは理解できますが、どちらも同じ API を使用しているため、一方が他方を待つことは明らかです。私の問題には、API とディスパッチの間の競合状態が関係しています...そして、setTimeout は良い解決策ではないと思います。

私が必要としているのは、ディスパッチまたは API 呼び出しをキューに入れるようにディスパッチャを設定する方法を確認することです。または、各コンポーネントにそのデータの API 呼び出しを行うように指示するより良い方法であるため、ディスパッチの問題さえありません。

ああ、ここに私の Dispatcher.js ファイルがあるので、それがどのように設定されているかを見ることができます: