問題タブ [react-router]

ルートを介してデータを渡す最良の方法を見つけようとしています。params を使用できることはわかっていますが、params に属さない特定の種類のデータがあります。

例: アプリケーションのリストを表示するインデックス ページがあります。各アプリケーションの横には、そのアプリケーションのビューに移動するためのボタンがあります。

アプリケーション自体を Application ハンドラに渡したい。ただし、アプリケーション全体を params で渡すのは意味がありません。アプリケーション識別子をparamsに渡すことは理にかなっていますが（つまり、:idまたは:name）

したがって、私がこれを行うべきだと思う方法は、アプリケーション識別子を params に渡すことです。次に、Application コンポーネントで、ID を指定して適切なアプリケーションを ApplicationStore で検索します。

ただし、アプリケーション自体を渡す方が簡単で高速ではないでしょうか? これを行う方法はありますか。これをしない理由はありますか？

ここにいくつかのコードがあります：

<Link to="showApplication" params={{name: application.name}}>View</Link>

また

<Link to="showApplication" params={{application: application}}>View</Link>

前もって感謝します！

最近、react と webpack の使用を開始しましたが、ほとんどの点で優れていますが、テスト時にアプリが iframe にレンダリングされ、ルート以外のルートを直接読み込むことができなくなります。したがって、テストしたい場合はhttp://localhost:8000/#/signin、その URL を読み込むことはできませんが、代わりにベース URL を読み込んで、サインイン ページを指すリンクをクリックする必要があります (または、少なくともそれが機能することがわかった唯一の方法です)。 ）。

これを行うより良い方法はありますか？

これは、かなりハックなソリューションを備えた同様の質問です。あれから何か変わったことはありますか？

CSS ではなく requestAnimationFrame を使用してトランジションをアニメーション化できるように、React Router でアニメーション用の React の低レベル API (つまり、ReactTransitionGroup) を使用しようとしています。各ルートに関連付けられたコンポーネントで呼び出される特別なライフサイクル フックを取得する方法を知っている人はいますか?

RouteHandler コンポーネントを ReactTransitionGroup 内にラップしようとしましたが、ルートを変更するときに現在のルートのコンポーネントの「componentWillLeave」イベントが発生しません。

これが私の問題を示す JSFiddle です: http://jsfiddle.net/d2mnwqLj/3/

反応ルーターの奇妙な動作に気付きました。私は自分のルートを次のように定義しています：

https://github.com/shovon/generator-react-material-uiのフォークで。

LeftNav のリンクをクリックすると、期待どおりの結果が得られます。gulp を開始すると、/ から /home へのリダイレクトが機能します。奇妙で望ましくないように見えるのは、次のようなものを入力するときですhttp://localhost:3000/#/some-undefined-route。予想どおり、DefaultRoute ハンドラーが引き継ぎ、ホームページのコンテンツが表示されます。ただし、奇妙な URL は残ります。私が期待するのは、未定義のルートが事前定義されたキャッチオールにリダイレクトされることです。たとえば、そのコンテンツを表示するだけでなくhttp://localhost:3000/#/some-undefined-route、自動的にリダイレクトしたい。http://localhost:3000/#/home

目的の効果を得るためにミックスインを使用しようとしていますtransitionTo()が、これを処理する「正しい」方法を誰かが知っているかどうかまだ疑問に思っています. また、私が見ているのは実際に意図した反応ルーターの動作なのだろうかと思います。何かが欠けている場合は、啓発されたいと思います。乾杯！

アップデート

反応ルーターのタウローズから:

やってみました

<Redirect from="*" to=".." />

https://github.com/rackt/react-router/issues/732に応答する場合。

同様の質問で他の人を助けるかもしれないのは、各サブルートにも Redirect を提供する必要があることに注意することです.

どうやら、このセットアップは、より詳細なルート制御と 404 などの処理を可能にするように設計されているようです。

from="*"最初はそうかなと思っていたのですが、スプラット（ ）の仕組みがわかりませんでした。多分これは他の人に役立つでしょう。乾杯。

Edit2 つの異なるルート (Createおよび) でフォームをレンダリングするコンポーネントがありますEdit。

EditRoute入力を埋めるためにサーバーからのコンポーネント要求データにいる場合、それ以外の場合はフォームを表示するだけです....

このリクエストはcomponentDidMount(React ドキュメントにあるように) で行われます…</p>

ここに私の問題があります: もし( ) にいてedit( /brands/1/edit) に行くと、私のコンポーネントは を通過しません。なんで？私のコンポーネントが次のページに残っているようです。create/brands/createcomponentDidMount

Obs: render メソッドが呼び出されます。そして、私は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 も提供します。

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