2017-11-06 10 views
2

マイセットアップは、ルータ4を反応させるの - ハッシュ

を使用してアーキテクチャ上の質問をルーティング私は自分のアプリケーションでは、ルータ4を反応させ使用していますし、ページ上の特定のルートにハッシュを追加するの線に沿って何かを達成しようとしています、その意志ユーザーがその状態にリンクできるようにページの状態を保存します。

たとえば、私は多くのバリアントを持つ商品を持っています。ユーザーがバリアントを選択すると、バリアントIDがURLに追加されるため、myapp.com/cars/truckmyapp.com/cars/truck#redになります。その特定の変種、それは私が欲しいものです。

私の問題

私の問題は、ユーザーがページに移動し、いくつかのバリエーションを選択した場合、その後、を後方移動しようとしますが生じます。私はハッシュを変更するので、各後ろのステップは、ブラウザ履歴の前のバリアントをヒットします。 だから家に

  1. ユーザー土地myapp.com/
  2. ナビゲート
  3. myapp.com/cars/truckには、赤のバリアントを選択した場合=>myapp.com/cars/truck#red
  4. その後、青myapp.com/cars/truck#red =>myapp.com/cars/truck#blue

彼らはブラウザの戻るボタンを押すと、myapp.com/cars/truck#redに戻ります。希望のエフェクトそれらは変種とハッシュの変更を省略して前のページに戻ります。これはmyapp.com/です。

私はこれがブラウザの動作であることを理解していますが、ユーザーがバリアントリンクに直接リンクできるようにする方法があれば、の場合は、ユーザーは前のページに戻ります(そのシナリオではmyapp.com/です)。おそらく私がこれをやっていることを再考すると、私はどんな提案にも開放的です。

私はreact(16)を使用しており、これが役立つ場合は、ルータ(v4)を反応させています。必要に応じて任意のコードを表示することは幸いです、私に教えてください。読んでくれてありがとう! replaceStateを試してみて、それが履歴エントリを追加することなく、URLを更新します

+0

代わりにハッシュを変更してクエリのパラメータを変更しないでください。 'myapp.com/cars/truck?color = red&engine = 4L&rating = 4' –

+0

@DominicTobiasはブラウザの履歴に保存されているものはまったく同じではありませんか? – ajmajmajma

+1

ああ、私は質問を誤解しました。その場合、https:// stackoverflowの二重引用符のように見えます。com/questions/20937280/how-to-change-url-without-changing-browser-history(tl; drは 'replaceState'を使用) –

答えて

2

history.replaceStateは、()(正確にhistory.pushStateように動作) (そのreplaceState除く) 代わりに現在の履歴エントリを変更新しいものを作ること。これにより、グローバルブラウザの履歴に新しいエントリが作成されることはありません。

history.replaceState(null, 'Red Truck', '/truck#red') 
+1

ちょうどこれに追加する - 反応ルータ(4)の文脈で、私は 'this.props.history.replace( 'path');' – ajmajmajma

関連する問題