問題タブ [react-router-redux]

私はreactjs、redux、およびreact-router（redux-simple-router）に基づいてWebサイトを構築していますが、ユーザーが認証されているかどうかに応じてルートパスを共有する方法を理解するのに苦労しています。

私はこの例を探していましたhttps://github.com/reactjs/react-router/tree/master/examples/auth-with-shared-rootですが、正直言ってうまくいきませんでした。

私は2つの異なるレイアウトを持っています。1 つ目はパブリック レイアウトで、ユーザーが認証されていない場合に表示されます。ここから、ログインページと登録にアクセスできます。

ユーザーが認証された後、完全に異なるレイアウトである内部アプリを表示したいのですが、同じルート URL で実行します。

例: http://example.com/

ユーザーが認証されていない場合:

認証後、同じルート URL を保持します。

フェイスブックと同じです。

私の質問は (そして、例を提供できれば素晴らしいことです): 認証ステータスに応じて、同じ URL で異なるレイアウトをレンダリングするにはどうすればよいですか?

PD: メソッド hasToken を使用して、認証ステータス (JWT) を格納する Token クラスがあります。

この例では JSX 構文を使用していますが、目的の結果を得るために構成構文に切り替える必要があるかどうかはわかりません。

どんな助けでも大歓迎です。

onEnterフックを介して、react-router (v2.x を使用) で認証/承認戦略を実装しようとしています。(redux と react-router-redux も使用)

私はほとんどそこにいると思いますが、保護されていない場所または許可されていない場所にいるシナリオがあり、保護されていて許可されていない場所に移動しようとして、「そのままにしておきたい」 、しかし、onEnterフックをヒットすると、引数はすでに許可されていない場所にあり、元の開始場所でnextStateやりたいと思っています。replace

現在、開始場所を利用できるようにするために、自分の場所の履歴を redux 状態で保存することをいじっていますが、目的の効果を達成するためのより簡単な方法があるはずです。

任意の提案/ガイダンスをいただければ幸いです!

react-router-redux を使用すると、ルーティング情報を取得する唯一の方法は props のみであるかのように見えます。これは正しいですか？

現在、アプリで行っていることは大まかに次のとおりです。

アプリ

主要

メッセージリスト

私がやりたいことは、すべてのコンポーネントから {...props} を削除し、MessageList を次のように変更することです。

すべてに props を渡さなければならないことは、Redux が自分のアプリケーションをどれだけきれいに作ったかという点で大きな後退のように感じます。したがって、パラメータを渡すことが正しい場合、なぜそれが望ましいのでしょうか?

これを引き起こした私の特定のケース：

メッセージを送信する (SEND_MESSAGE アクションをディスパッチする) UserInput コンポーネントがあります。現在のページ (チャット ルーム、メッセージ フィード、単一のメッセージなど) に応じて、リデューサーはそれを正しい場所に配置する必要があります。しかし、react-redux-router では、リデューサーはルートを認識していないため、メッセージの送信先を認識できません。

これを修正するには、props を渡し、ID を SEND_MESSAGE アクションに添付する必要があります。そうでなければ、単純な UserInput がアプリケーションのビジネス ロジックを処理します。

私は自分の位置を適切に状態に保存できるようにするreact-router-reduxを使用しており、react-routerを使用してルートを定義し、ルート間のリンクを作成できるようにしています。

<Link />1 つの問題は、次のようなコンポーネントを使用してナビゲートする必要がある場合です。

これにより、ルートの変更がトリガーされ、新しいルート (この場合は<Movie />ルート) の読み込み時に、ムービー ページの状態が読み込まれます。

新しいページはナビゲーションで空白になるか、ローダーを配置できますが、実際には新しいページの API 呼び出しが読み込まれるまで新しいページに移動しないため、これはページ間の遷移にはうまく機能しません。pitchfork.comやtheguardian.comなどのサイトに似ています。

この実装はこの質問で説明されており、ページ遷移間でローダーを使用するだけのアプローチがreal-world-exampleとreddit api の例で使用されています

私の質問は、ナビゲートする前に自分のサイトに新しいコンテナ/ルートの状態をロードしたい場合、この質問でdax chenが提案したアプローチに従う必要がありますか?

答えをまとめると、アクションを起動し、redux-thunk を使用して、新しいコンテナー/ルートのアクションを呼び出して状態をプリロードできます。完了したら、react-router-redux のpush()アクションを使用してページに移動します。

これが移行前にページをプリロードするための推奨されるアプローチである場合、このアプローチを使用するようにreact-router-redux-exampleと現在のサイトを変更します。

新しいルートのデータをロードしてナビゲートするアクションは、次のようになります。

呼び出す新しいコンテナーのアクションと、ナビゲートする新しいパスを識別するためのロジックが必要になります。fetchData()新しいページのコンテナ コンポーネントで静的メソッドを呼び出すことができます。

したがって、これはコンポーネントをやや複雑にし<Link />ます。これが正しい方法であるかどうかについてのアドバイスを探しているだけです。または、より単純で推奨されるアプローチを見逃している可能性があります。

私は使用していますreact-router-redux、

url私がasを定義し、データオブジェクトをas/go-here/${routeId}と定義したとしましょうrouteId

ディスパッチを使用して、以下のように新しいページにルーティングしています。

新しいページに移動した後、データ オブジェクトにアクセスしたいのですが、どうすればよいですか?

「/ project」を押すと、ユーザーをデフォルト（最初の）プロジェクトにリダイレクトする onEnter パラメーターを含むルートがあります。

そして、redirectToDefaultProject:

リストできるように、Project コンポーネントにプロジェクトが必要です。現在、プロジェクトにまったくアクセスできません。コンポーネントに接続されていないだけです。

APIはちょっとあいまいです:
replace(pathOrLoc)現在の履歴エントリを新しいエントリに置き換えることを除いて、push
と同じです。

そしてプッシュは次のようなものです：

/users/12/ を処理するコンポーネントは、this.state または this.props.route.state を介して「fromDashboard」を取得できると思いますか? 置換で機能しないのはなぜですか?