問題タブ [react-router-redux]

私のページのナビゲーションを処理するために、react-router と react-router-redux を使用しています。コンポーネント内でプログラムで URL を変更する必要があります。これを達成するために history.push というメソッドを使用しようとしましたが、このメソッドは URL を変更するだけであり、この URL に関連付けられたコンポーネントは更新されません。このアプリはページネーション付きの単純なリストであるため、次のページに切り替えると、たとえば /posts/1 から /posts/2 に URL が変更されますが、ビューは更新されません。これは次のように機能するはずだと思います：

1. ユーザーがページネーション項目をクリックすると、クリック ハンドラーが呼び出され、引数としてページ番号が渡されます
2. クリック ハンドラー内で history.push(/posts/[page]) を呼び出します。リンクコンポーネントを使用できますが、ユーザーがページネーション項目をクリックしたときに何かできるようにしたいです
3. ObjectList コンポーネントが再びマウントされ、 componentDidMount が呼び出されることを期待しています

これはおそらく最良のアプローチではないので、ヒント リンクがハードコードされていること、特に最初の引数がハードコードされていることをお勧めします。私のソース コード:

client.js

store.js

ObjectList.js

ホーム.js

結果.js

レデューサー/index.js

レデューサー/objects.js

app.js

actionCreators.js

Windows モバイル用の反応 js アプリケーションに取り組んでいます。私のルート設定は以下のようなものです

最初のルートに 3 つのタブがあり、その URL は次のようになります

私はreact-routerを使用しており、タブは次のようなタブです

どのようにナビゲートしていますか? アプリケーションを実行すると、最初のページが表示さshows/1れ、2 番目のタブをタップするとルートが表示されますshows/2。

ブラウザで何が起こっていますか？ ブラウザでアプリケーションを実行すると、shows/1 が表示され、2 番目のタブをクリックすると、URL が に変更されていることがわかりますshows/2。ここでブラウザの戻るボタンをクリックすると、shows/1 に移動します。から設定ページに移動し、設定ページにshows/2いるときにブラウザの戻るボタンをクリックすると、shows/2ページが表示されますが、まったく問題ありません。

デバイスで何が起こっていますか？ デバイスでアプリケーションを実行すると、shows/1 が表示され、2 番目のタブをクリックすると 2 番目のタブ (shows/2) のコンテンツが表示されます。ここで、デバイスの戻るボタンをクリックすると、アプリが終了します。から設定ページに移動し、設定ページにshows/2いるときにデバイスの戻るボタンをクリックすると、shows/2ページが表示されますが、まったく問題ありません。

問題は何ですか？ 基本的に1つのコンポーネントであるタブから別のタブに移動すると、デバイスのナビゲーションが保存されないと思います。

私が試したことは何ですか？ タブからを削除しようとしLink、クリック イベントを追加しました。クリック ハンドラで以下のコードを使用していますが、役に立ちません。

振る舞いはどうあるべきですか？ デバイスで から に移動しshows/1、shows/2からデバイスの戻るボタンをクリックすると、アプリを終了する代わりにshows/2に移動できるはずです。shows/1

どんな種類の助けも本当に感謝しています。

次のようなルートがある場合：

次に、そのルートをエクスポートすると、次のようにアプリ全体で使用できます。

リンクのパラメーターを動的に設定するにはどうすればよいですか? つまり、私はこれをしたいと思います:

しかし、paramsは完全に無視されます...そして、クエリは単にクエリ(?userId=)をパラメータではなくします...何かアイデアはありますか?

アクションをディスパッチしてペイロードでそれらの値を使用するために、Redux ミドルウェア内の URL パラメータを抽出したいと考えています。

生成されたURLでAPIから成功応答を受け取った後にURLを開きたいです。次のように、レデューサー内でその URL を開こうとしています。

これはほとんどのブラウザで問題なく動作しているようですが、Safari では互換性がありません。

これをどのように実装してクロスブラウザ互換性を持たせることができますか? react-router-redux でそれを行う方法はありますか?

ありがとう！

更新: プロジェクトのルートではなく、外部 URL を開く必要があるため、おそらく react-router は解決策ではありません

状態オブジェクトには、複数のコンポーネントでデータ ソースとして使用される「場所」キーがあります。URL（Googleマップに非常に似ています）には、座標である「場所」というパラメーターがあります。私の目標は、その値を (多少の変更を加えて) 状態の「場所」キーにマップすることです。どうやってするか？

UPDATE 私が想像できる唯一の方法は、ミドルウェアを作成してルートアクションに反応し、何らかの方法でURLからパラメーターを抽出してから、リデューサーによって処理される新しいアクションをディスパッチすることです。または、追加のミドルウェアを必要とせずに、レデューサーを使用するだけです。しかし、これは良いアプローチではないと思います...

set と書かれている場所をいくつか見つけましたqueryKey: falseが、使用している特定のパッケージでそれを設定する場所が見つかりません。これが私の現在の設定です：

最近、React / Redux の学習を開始しました。現在、小さな単一ページのアプリケーションを構築しようとしています。

最近、理解できず、修正できない問題に遭遇しました。

コードをお見せしましょう：

index.js

基本的にこれは、react-router-redux GitHub ページ (セクションTutorialまでスクロール) の例です。唯一の違いは、hashHistoryを使用していることです。

App.js

ナビゲーション.js

Home および About コンポーネントは、SPA の状態を視覚化するために <h1> 見出しをレンダリングするだけです。

これまでのところ、すべてが期待どおりにうまく機能しています。ユーザーがAboutリンクをクリックすると、それに応じて URL が変更され、リンクが赤くなります (activeStyle プロパティのため)。

しかし、ここで私の問題が発生します（これをまだ読んでくれてありがとう）：

<Navigation> コンポーネントをreact-redux connect()経由でラップしたいと考えています。だから、これは私の新しいバージョンです

ナビゲーション.js

しかし、現在、activeStyle 機能が壊れているようです... アプリをナビゲートすると、現在アクティブなリンクの色が変わりません。

私は本当にこの問題を何時間も解決しようとしました:(どんな助けも大歓迎です!