Create a Modal Route with Link and Nav State in React Router
In this lesson we'll show how the Link component to prop can receive an object. This allows us to pass state to the route. With the nav state we destructure off of location we can determine if a user wants to open a modal or on a cold visit show an image embedded in the page.
Instructor: [00:01] We're going to start by importing Switch, Route and Link from React Router DOM. With our Switch and our Route, we're going to set up the two routes, which will be our home and our photos.
[00:17] We're going to use Switch. This will determine between two routes to select based upon their paths. We're going to say Route, say path = /. We're going to give it exact to exactly match the slash to render our component home.
[00:35] Then, we'll set up our photo routes. We'll say, RoutePath = /photo. We give it component = our photo. Now, if we go take a look in the browser, we can see that we are rendering at the root, our /, and we're rendering our home tab.
[00:57] We'll set up our Link so that we can navigate between both of these routes. We're going to create our Link to /, which we'll give a class name Link just so we have some slight styling and spacing.
[01:10] We'll say home is the text for our Link. We'll also create a Link to /photo, class name also Link. We'll say, view photo. As our photo route has some content, we're going to create an image and use the source unsplash.com/random. Which will return a random image from Unsplash.
[01:44] If we go and look at our app, we can see we have a home and a view photo when we click on it. We'll load a random image from Unsplash. In some cases, when we click on the view photo link, we might want to open up the photo in a modal or image gallery.
[02:02] However, if we visit the page from just typing it in the URL, we want it to be embedded in the page. To do that, we'll use navState. The to property of Link doesn't only take a string. It also takes an object. That object has pathname, which will just be the equivalent of what the to of string is -- which is just a string.
[02:30] You can also add additional parameters that are called state. State will then be put onto the location at the next route. In our case, we're going to say, modal, true. This will indicate to a route that we want to use a modal. If the user navigates to it from just the URL, this will not be set, then we can embed it in the page.
[02:54] In our photo route, we're going to destructure location from the prop. This is provided by React Router. We're going to say, const state = an empty object and = location. If state isn't passed in, it will be undefined, we'll default it to an empty object.
[03:13] Then, we'll destructure modal from state. Now, we have access to a true and/or undefined, if it's just visited plainly. With that, we can then make some decisions on how we're going to render.
[03:29] First off, we might want to add a modal class. Class name = if modal is true, then render the modal class name. Otherwise, we'll say it's undefined. Finally, we'll add a close Link. We'll say if we are a modal, we'll render a link. We'll say to home.
[03:55] We'll make it just say close. If we go and we visit our photo, when we click on it, we can see that it pops up in a modal. However, it's covering our close. If we go back here, and we say wrap this in a div, go back to our app, we have our close. Which will just navigate us back home.
[04:27] Because the route will no longer be /photo, it won't render. If we go back, it maintains the same navState, our application will render in a modal. If we open up a new tab, and visit, we can see that our close isn't rendering, but our image is rendering in the page.
[04:49] If we click on view photo, it pops into a modal. Just like it would if you navigated to it while on the page.