Create Nested Tab Routes with Dynamic Paths with React-Router

[00:00] We first need to set up our router, so we're going to import browser router route redirect and switch from react-router-dom. We'll set up a const-routes equals our browser-router. This will use HTML5 routing. We'll then add a switch. This will allow us to select our routes based upon the paths that match.

[00:36] Our first will route with a path equals /home, and we'll give it our component which is just going to be the app that we are currently rendering and importing right here. Now, to set up an easy way to redirect from the slash to this path so that we can demonstrated the nested dynamic tabs, we're going to set up a redirect and say from to, which is going to be /home.

[01:09] Whenever we hit our slash it will redirect to /home which will then render our component. The final thing rather than rendering just our app, we place in our routes here.

[01:21] Now we can go take a look. We can see that we are rendering our app. If we go to just the route, the slash, it will redirect to /home in the URL. Let's switch over and create the routes in our application.

[01:39] These are going to be our tab routes but they'll just be normal React components. We'll say const profile is equal to a functional React component. We'll just say, you're on the profile tab. We can do that for the others as well. We're going to create a comments as well as a contact.

[02:03] Instead of profile we'll say comments. Here we'll say contact. The next thing we need to is bring in the link from react-router-dom. This will allow us to change the URL. Now we can set up our links inside of here and say, link. We'll say 2=/home. We're going to give it a class name, link, just to give it a little bit of styling. This will be our profile.

[02:38] With React-router we need to specify an absolute path to the route. With this, this means we need to add /home/comments and /contact. We'll change these to comments, and change this to contact. If we go and take a look, we could see that we have our links rendering.

[03:04] When we click on them the URL will change to the appropriate route. Now we need to set up the nested routes that will respond to these particular path links that we've set up. We'll import switch as well as route.

[03:26] Inside of our tabs we'll set up our switch which will just determine a single one that needs to be rendered. Then we'll set up our routes. Our first one will be a route with the path of /home. We'll put an exact here so that when we are at /home it will render this exact profile component.

[03:49] However, when we go to these others it will render those components at that particular URL. We'll say, component=profile. We'll set up our other routes and say, comments/contact and switch these over.

[04:16] If we take a look we can see that we are /home so our profile is rendering. Click on comments. If we change the comments and click on contact we are now rendering contact. The problem is that if we change /home at the top level, so instead of /home we say crazy route and go back to our app, we can see that it's no longer rendering correctly.

[04:40] In order to fix this, rather than hard coding home we're going to get the path from this .props.match. This .props.match refers to the matched path from up above. It will be equivalent to this /crazy route. Now rather than /home we can replace it with path. Here we'll replace it with path. Anything /home we'll replace with our path.

[05:17] Then we can just fix these to be string interpolations. Now we've built our links to reference the matched path and then add in the other path parameter that is necessary to then also match up to these sub-routes that are rendering.

[05:52] If we go look, once again we now have our crazy route which is just the matched path rendering at profile, comments and contact. We can then switch this back to home or anything else, and these will continue to work correctly.