Jimmy Merritello
001230e0a8
Add Route as Modal Page Example ( #12945 )
...
### Add dynamic routes to _with-route-as-modal_ example
This PR adds [dynamic routes](https://nextjs.org/docs/routing/dynamic-routes ), [getStaticPaths](https://nextjs.org/docs/basic-features/data-fetching#getstaticpaths-static-generation ), and [getStaticProps](https://nextjs.org/docs/basic-features/data-fetching#getstaticprops-static-generation ) to the **with-route-as-modal** example. This change might also clear up some confusion here on https://github.com/zeit/next.js/issues/11971
Additionally this PR makes sure each modal route is also a modal **page.**
This is an important distinction and makes sure the experience is the same should the URL (route) be shared as a link. In other words, `index.js` need not be the only "entrypoint" to browsing the website.
With the additions in this PR, each post page is an actual page, so if you were to share the link for **Post 3** you'd get this:
<img src="https://user-images.githubusercontent.com/7191639/82058282-25ad7780-968a-11ea-94f1-9b4a36abccf9.png " width="200px" />
(clickable outer region brings you back to the 'gallery')
**Update:** I have also included the `pathname` to signal the difference in which page component is rendered
Rather than this (previously):
<img src="https://user-images.githubusercontent.com/7191639/82058199-0878a900-968a-11ea-97d2-e9e20c9267fc.png " width="200px" />
I have used a similar approach [here 🔗 ](https://hashiconf.com/digital-june/schedule/the-hitchhikers-guide-to-terraform-your-infrastructure )
2020-05-27 21:22:33 +00:00
