Pinterest Style Modals

[ChrisCinelli]

Pinterest has an interesting pattern for navigation (used by other sites too). From a list of items, you click on a item, this open a modal and the route change. When the modal is closed, you go back to the list of items and the route revert back.
Great for quick navigation. Great for user if they copy and paste the URL.

If you reload the page when the modal is open, the item is not in a modal. The context where you come from is not obviously available. And it is great for SEO.

See this video:

What would it be the best way to build this in react-router?

I saw this: #2335 - I can put the modal in the list item page component but I am not sure if it is the best way to do it.

[timdorr]

There is literally an example exactly for this kind of thing 😄 https://github.com/ReactTraining/react-router/tree/master/examples/pinterest

[kastsiushkin]

@timdorr did this example move?

[pshrmn]

@kastsiushkin The link above is for v3, so its in the v3 branch now https://github.com/ReactTraining/react-router/tree/v3/examples/pinterest

Alternatively, there is a "modal gallery" example that does the same thing for v4 https://github.com/ReactTraining/react-router/blob/master/packages/react-router-website/modules/examples/ModalGallery.js

[kastsiushkin]

Thank you, for now we are on V3.

[nakulthebuilder]

newest v4 working link: https://github.com/ReactTraining/react-router/blob/master/website/modules/examples/ModalGallery.js