Create a Query Parameter Modal Route with React Router

Instructor: [00:00] We're going to start with a basic structure. We're going to have a home page and a profile page. The home page will just have a link to the profile, as well as a login link that we'll fix later. The profile will just have a login link. There's some cases where you need to use a query parameter to show a modal on a page, and also have it be a route that can be linked to from any page, and show above the page that it's currently on.

[00:27] Now, let's take a look at what it actually takes to render a modal inside of React. The first thing we're going to look at is the modal route. We've added this additional div as a location that we can render any of our modals from Create Portal. Create Portal's imported from React DOM. It allows us to render, and have the appropriate bubbling of anything that is inside of our children, and still bubble up through React correctly.

[00:58] Now, the one point is that we need to render it at a different location. That location is our modal route, which we just showed that we added.

[01:08] We pass in our modal style in an onClick so that when the backdrop is clicked, that we can close it. Then just pass any arbitrary children. Anything that we pass into this modal will render fixed above whatever is currently on the page.

[01:25] This is not a very successful modal so I'd recommend using another modal component, but this does the job for us right now to display how to show a route as a modal with a query prim. To add in our route that is a login page modal, we're going to actually create it outside of this switch here. The switch says, only render one of these that matches.

[01:49] However, when we render our route with a path, any time that that path is matched, that route will render. Because we don't really care what route is rendering and we only care about the query prim and we want this to always re-render anytime that the URL changes, we're going to render this outside of our switch. You can do this anywhere with any route.

[02:14] We can render a route here. We'll give it the path of /, which just means anytime that matches anything in the URL, this route will render. We'll give it a component and we'll say login page. We'll create that here in a second.

[02:33] Essentially, this is just always going to re-render this login page component. Now this login page component can look for if there is a query parameter in the URL and render above our other routes here.

[02:46] Let's create our log in page modal now. The first thing that we need to do is import modal from the modal component that we made. This gives us the ability to now render any particular content as a modal. We'll render modal. Then we can render some content in here.

[03:07] I already got some content created. It just displays as flex and centers anything, and creates a height of a 100 percent, and just says "log in modal." Then because we want to be able to click on the backdrop to close this, we're going to need to add our onClick to our modal. Say onClick.

[03:29] Then we can execute something. Because this is a route from React Router, we get access to all of the routing calls that we need. We get access to this.props.history push. We'll write out this.props.history.push, which will push a new route.

[03:51] Then because we're going to be very generic, and we're going to be sitting on any page possible, we need to reference the current location. We'll say this.props.location.pathname. What this is going to do is it's going to look basically at the URL pathname and ignore any query parameters after it. We will navigate to that particular route.

[04:19] That will just be the route we're sitting on. We won't use the match.url because the match.url is provided by React Router. That's going to be the reference to what is here. Our matched URL will always be a slash, if you're on the profile page, it'll be slash profile, but we want to know it's actually in the URL itself. We do that with a location pathname.

[04:41] Now we need to get access to the query parameters itself. We can use something that's called new URL SearchParams. This is supported by most browsers, but not all browsers. It will parse the query parameters into a map that you can actually look up.

[05:01] We'll then parse in our this.props.location.search which is the search portion of the URL, which is often the query parameters. We'll just assign that to params. Now we can use the get method on our params, and look for a particular query param to render this modal. In our case, we'll say params.get, and we'll look for the query parameter login. If we have it, if it's any sort of tricky value, then we will render a modal. Otherwise, this will return undefined and this route won't render anything.

[05:41] Finally, we now need to fix the URLs on the home and profile page that linked to login. The two property usually takes a string that can also take pieces of a path and assemble the URL for you. In our case because we want a generic URL, we can give it a path name that references the current match URL because that's the route that we're currently on. We'll say this.props.match.url.

[06:12] Additionally, because we know that the query parameter for the search portion of the URL that we're looking for is called login, we'll say search and then just give it a login=true. We can do the same thing on the profile page because we haven't hard-coded anything to be the home page or their profile page.

[06:36] Now, if we go check this out in the browser, we have our go to profile and our login. We can see that when we click on our login, it adds the query parameter and now our login modal is rendering. We can click on the backdrop and it closes and goes back to our /.

[06:51] If we go to our profile and click login, we can see now it's profile and login true and we have our backdrop that we can click again and go right back to our profile.