Redirecting a Route

Right now when you visit the Courses section of the directory app, 0:00 the page displays the heading and sub-navigation only. 0:03 The user needs to click one of the topic links to view any content for 0:06 the section, but the user should immediately see one of the course lists 0:10 when they first navigate to courses. 0:13 Now, one way we could quickly fix this is by opening up Header.js, 0:16 and adding /html to the Courses link. 0:20 And this navigates you to courses/html right when you click on the Courses link. 0:24 But notice how the Courses navlink 0:30 loses its active styles when you click over to CSS or JavaScript. 0:33 Their URLs do not match the /courses/html subpath defined here. 0:37 So, the link doesn't get assigned that div class. 0:42 Instead of hardcoding the path here in the NavLink component, 0:45 react-router provides an intelligent redirect component that instructs 0:49 the router to redirect from one route to another. 0:53 For example, redirect from /courses to /courses/html. 0:55 So let's delete this subpath from the courses link and 1:02 in courses.js, let's import redirect from react-router-dom. 1:06 Over in my routes, 1:14 I will include a redirect component just above the HTML route. 1:15 And redirect requires a to prop and the value should be the URL to redirect to. 1:23 So for instance, if you set the value to the root path and click the courses link, 1:30 since we've defined the redirect from inside the courses component, 1:36 the router redirects from the courses route to the home route. 1:40 So let's go back and set it to redirect to /courses/html. 1:45 And now when you click over to Courses, 1:51 you immediately see the list of HTML courses. 1:54 And clicking a subnavigation link loads new content while keeping both 1:57 the topic and courses active. 2:02 Great, now we could stop here, but watch what happens when I click on HTML, 2:04 CSS or JavaScript, then click back to courses. 2:09 The courses page is blank. 2:14 We lose our redirect and if you refresh the page, while viewing the CSS or 2:15 JavaScript course lists, you're redirected back to courses/HTML. 2:21 Since we're redirecting from deeply nested routes, 2:27 we need to make a few adjustments to keep the URL in sync with the UI. 2:30 A better solution is to override the existing courses route and 2:34 render a redirect component that will navigate to the new location. 2:38 Remember, the redirect component is like a regular react component. 2:42 So let's create a route that matches the path /courses and 2:46 use the render prop to return the redirect component. 2:54 So let's pass the render prop op function that returns the redirect 3:00 component we just wrote. 3:05 And to renter this redirect when the path is exactly /courses, 3:07 we need to include the exact prop. 3:15 Let's give this a save and over in our app when we click courses, 3:19 the router still redirects YouTube horses /html Click CSS, refresh, JavaScript. 3:25 Refresh and you remain at the same URL. 3:33 And clicking back to courses from here displays the default list of HTML courses. 3:35 Great, it works. 3:40