リアクタールーターV4：同じ画面でモーダルをレンダリングしてURLだけを変更し、そのURLで画面全体を再構築できるようにする方法

Question

私はモーダルと同じように動作するモーダルを作成しようとしています特定のツイートを表示する。そのスクリーンショットで

1. あなたはモーダルが開いているときは、常に、ステータスコードは、元のURLに付加されていることを確認することができますが、私は同じ画面に残ります。
2. URLをコピーしてブラウザのアドレスバーI に貼り付けたテイクでは、URLをコピーしたときと同じように、モーダルオープン と同じ内容がバックグラウンドでロードされます。

私は最初の部分で覆われています。すなわち、同じ画面にモーダルを読み込んでいます。

ここでの問題は、私がブックマークへのユーザーのモーダルである場合は、それが作成のURLのためにそれを可能にするために何をすべきか見当がつかないということですcodesandboxに

反応し、ルータの例ですディスプレイ（この例では/ギャラリー/ IMG/1）

、次いで背景とモーダルOPEに同じ成分（ギャラリーの構成要素）を含むページをロードすることができるそのURLに基​​づいてn。

P.S. codesandboxの例では、私は意図的にModalSwitchコンポーネントにいくつかのルートを残しました。

Answer 1

おそらく、同じギャラリーコンポーネントを指す2つのルートgalleryとgallery/img /：idを作成できます。その後、ギャラリーコンポーネントのcomponentWillMountの間に、URLにidパラメータが含まれているかどうかを確認し、モーダルとイメージを読み込むことを決定できます。

これで、ModalSwitchコンポーネントを完全に削除し、モーダルを閉じるときにユーザーをギャラリールートにリダイレクトすることができ、URLを常に正確に保つことができます。