同じReact Routerルートのさまざまなコンポーネントを条件付きで読み込んでレンダリングする明確な方法はありますか？

Question

ユースケースは、ユーザーがログインしているかどうかに基づいてルート（/）を2つの異なるコンポーネントのいずれかにマップすることです。これらの2つのコンポーネントを別々のバンドルに置いて、 render（）メソッドにログインチェックを入れることはできません。

コンポーネントを遅延ロードするためにrequire.ensure（）で動的ルート定義を使用しようとしましたが、初めて動作しますが、ログイン状態を変更してもコンポーネントは更新されません別のルートと/に戻る）。 ルーターを含むコンポーネントにpropsを手動で設定し、それをRedux接続されたコンポーネントに設定して強制的にルーターのレンダリングを試みました。また、リスナーをReduxストアに追加してコンポーネントの状態を変更しようとしました。ログインの変更に対する応答ですが、すべての試行で「変更することはできません;無視されます」というエラーが表示され、コンポーネントは変更されません。

私の醜い解決策は、ルータの外部にある別のコンポーネント読み込みコードを持ち、ログイン状態の変化を聞いて、一致するコンポーネントをロードし、それをrender（）で参照されるラッピングコンポーネントの状態に設定することです。コード。私が欲しいことをするためのきれいな "React-Router-ish"の方法はありますか？

Answer 1

リアクタルーター4は、コンポーネントレンダリングのルート構成部分を作成したので、これをかなり解決します。したがって、条件付きレンダリングは、場所や他の小道具/状態に基づいて同じです。

Answer 2

クリーンな「React-Router-ish」方法に最も近いことは、リアクションルータEnterhooksを使用することです。

入力フックは、ルートがレンダリングされる直前に呼び出されるというユーザー定義の関数です。最初の引数として次のルータの状態を受け取ります。 replace関数を使用して、別のURLへの遷移をトリガすることができます。

にはonEnter(nextState, replace, callback?)という属性が使用されています。

ルートを入力しようとしたときに呼び出されます。次のルータの状態と別のパスにリダイレクトする機能を提供します。 thisは、フックをトリガしたルートインスタンスになります。

コールバックが3番目の引数としてリストされている場合、このフックは非同期に実行され、コールバックが呼び出されるまでトランジションがブロックされます。

私が従う一般的なベストプラクティスは、場所のauth-チェックはあなたのルートから離れて流れ、遷移イベント/フック内に配置することです。

通常、ルートハンドラが実際にレンダリングされる前に、authを確認して、別のルートにリダイレクトします。あなたの場合、同じルートを使用したいが、異なるコンポーネントをレンダリングする場合は、同じ手法を使用しても同じことができるはずです。しかし、これは一般的なことではありませんが（私が見たものに基づいて）、可能でなければなりません。

このアプローチの完全な例については、here's the auth-flow code example you can checkを参照してください。これはReact Routerの作成者が共有しているので、私には信じられないようです。

PS：私の回答は、リアクタのバージョンが> 0.13.xの場合に有効です。