問題タブ [react-router]

私はreactとreact-routerをrequire経由でアプリにロードしようとしています。シムのセットアップに従う必要がありますが、react-router が適切な React オブジェクトを取得していないというエラーが引き続き発生します。

すべて Bower 経由でインストールされます。React は 0.11.1、ルーターは 0.7.0

処理されたコンポーネントにいくつかの小道具を渡そうとしていますが、react-router はそうしません。

URLに「#/」が表示されるようになったため、ルーターは正常にロードされます。左のナビゲーションは正常にレンダリングされ、状態も更新されます。ただし、処理されたコンポーネント、つまり objectHandler には props.selected はありません。ここで何か不足していますか？ありがとう。

反応ルーター 0.7.0 を使用しています

Reactを学習し、 React-routerを使用しています。私が構築しているアプリは、上部にナビゲーション メニューがあり、その下にコンテンツ セクションがあるモバイル スタイルのアプリです。アプリのページをナビゲートするときに、ページの「タイトル」をメニュー バーに追加して、現在どのページにいるかを識別したいと考えています。

私のルート:

HomePage.render:

NavigationMenu.render:

私の問題

HomePage への子ルートは、Ajax 呼び出しから返されたコンテンツに基づいてタイトルを設定する必要があります。

各ルートにコールバックを追加し、タイトルを親クラスに戻して、このデータを NavigationMenu に渡すことを考えていました。残念ながら、これは機能しません。ページをナビゲートするとき、繰り返し呼び出される唯一の関数はrenderであり、ここで状態を設定するとInvariant Violationエラーが発生します。

私の質問

• タイトルを管理するためのより良い方法はありますか?
• 毎回コールバックにデータを渡すルート レンダー関数に頼る以外に、現在のページを追跡するための代替手段はありますか(これは汚いようです)。

反応ルーターと一緒に開発で webpack-dev-server を使用するアプリを作成しています。

webpack-dev-server は、1 つの場所 (つまり "/") にパブリック エントリ ポイントがあるという前提に基づいて構築されているようですが、react-router ではエントリ ポイントを無制限に使用できます。

webpack-dev-server の利点、特に生産性に優れたホット リロード機能が必要ですが、react-router で設定されたルートをロードできるようにしたいです。

それらが連携して動作するように実装するにはどうすればよいでしょうか? これを許可するような方法で、webpack-dev-server の前で高速サーバーを実行できますか?

React には を管理する組み込みの方法がないため、以前はルート ハンドラーdocument.title内に設定していました。componentDidMount

stateただし、非同期で取得したものに基づいてタイトルを修正する必要があります。に割り当てを入れ始めましたが、ときどきいくつかのページに割り当てcomponentDidUpdateを入れるのを忘れてしまい、document.title気が付くまで以前のタイトルが残ります。

理想的にはdocument.title、代入することなく、宣言的に表現する方法が欲しいです。いくつかのネスト レベルでドキュメント タイトルを指定できるようにしたい場合は、ある種の「偽の」コンポーネントがおそらく最も便利です。

• 最上位 (デフォルトのタイトル)。
• ページ レベル (すべてではなく一部のページ)。
• 場合によっては、内部コンポーネント レベルで (ユーザーがフィールドに入力するなど)。

追加要件:

• 子で指定されたタイトルは、親で指定されたタイトルをオーバーライドする必要があります。
• 信頼できる (ルート変更時のクリーンアップを保証する);
• DOM を発行してはなりません (つまり、コンポーネントが を返すハックはありません<noscript>)。
• 私は react-router を使用していますが、このコンポーネントが他のルーターでも動作する方が良いでしょう。

私が使用できるものはありますか？

反応ルーターで発生しているトリッキーなエラーを見つけようとしています。何らかの理由で、最上位のページ ルートで子コンポーネントの 1 つの状態を設定すると、次のエラーが発生します。

このエラーは、そのパスに移動しているかどうかに関係なく発生します。私のルートは次のようになります。

そして、私の ajax 呼び出しは次のようになります。

このフィードは、HomePage と ProfilePage を含む一連のページで生成されます。:userId パラメーターがフィード内の Ajax 呼び出しにどのように関連している可能性があるかを理解するのに非常に苦労していますが、スタック トレースが私を導きます。ここで何が起こっているかについての助けをいただければ幸いです。

更新: 問題が見つかりました。私の mongo データベースは古かった (モデル スキーマが変更された) ため、多くの問題が発生し、この不変違反が発生しました。この 2 つがどのように関連していたのかはまだ完全にはわかりませんが、古いオブジェクトを削除すると問題が解決しました。

私はreact-routerプラグインを使用してルートを設定しています.2つのルートを提供したいです. list/(list/:idかなり一般的です)

しかし、「詳細」ルートを機能させるのに苦労しています。私が試したのは：

まず、これは現在機能していDetailsComponentません。list/123 にアクセスするときにレンダリングされません (例)

2番目に、これがうまくいくとしても、コレクション内の1つのモデルを「ダウン」に渡すにはどうすればよいDetailsComponentですか?

私は browserify を使用して ReactJS と (とりわけ) react-routerをバンドルしています。しかし、コンソールを見ると、メッセージ...

... 2 回(!) 表示され、実際には 2 つの ReactJS インスタンスが実行されていることがわかります。

ブラウザー化された JS を見ると、ReactJS のソースは 1 回しか表示されませんでした。

どうすればこれを回避できますか?

package.json:

実行すると、次のようnpm ls | grep -i reactになります。

javascript API を介して react-router を使用する例を見つけようとしていますが、これまでのところ何も見つかりませんでした。

私の目標は、react-router を試薬と clojurescript で使用することです。したがって、誰かがこれを機能させた場合 (Om を使用しても)、正しい方向に進んでいただければ幸いです。それ以外の場合は、JSX を使用しない単純な JavaScript の例が役立ちます。

編集 1 -- 解決策に近づく

JSX をプレーンな JS に変換する手助けをしてくれた @FakeRainBrigand に感謝します。

これが React.js 0.11.2 バージョンです (現在のリリースの Reagent が使用しているのは 0.4.3 です)。

JSXTransformer.jsヒント:お使いのバージョンの Reactを使用して JSX->JS 変換を実行できます。ページに含めて、ブラウザの開発者コンソールを使用して実行するだけですJSXTransformer.transform('/** @jsx React.DOM */<Route location="history">...</Route>').code

Clojurescript のバージョンは次のとおりです。

残念ながら、Reagent がデフォルトで作成するコンポーネントは、「標準」の React コンポーネントではないようですReact.isValidClass(myReagentComponent) === false。あとは、そのテストに合格する形でコンポーネントを生成する方法を理解するだけです。そのために投稿されたスタックオーバーフローの質問があります。

Clojurescript Reagent プロジェクトで react-router を使用しようとしています。問題は、react-router がコンポーネントに pass を要求することですReact.isValidClass(component)。これは、React 0.11.2 では次のように定義されています。

Reagent は、関数ではなくオブジェクトとしてコンポーネントを生成するようです。これが私のコードです：

この種の相互運用を機能させる方法を考え出した人はいますか?