Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript React Router 4 Basics Navigating, Nesting and Redirecting Routes Redirecting a Route

Posted by Serdar Halac
Serdar Halac
15,259 Points

Why does refreshing redirect to the HTML page when you are on, say, the JS or CSS page? Shouldn't it stay put?

So at the beginning of the video, one of the bugs is the fact that refreshing the page leads you back to the HTML section. Why is that? I mean, we have routes in the code, as well as navlinks that specifically say that if you have a url of /courses/css, you go render the CSS element, and the refresh button on the browser just goes to the same link that you're already on, right? So how does this work? Why is the big behaving the way it does? The instructor explains it as 'this is because we are routing from deeply nested loops' but not explanation is provided beyond that (although I like the teacher for sure).

Also why does clicking on the 'Courses' nav bar element lead an empty page? Clicking on the navbar leads to a navlink that leads to /courses, right? So therefore it should be redirected to courses/html, per our code, right?

The fix works and all, I just don't understand why the code before didn't work. I would like an explanation!

1 Answer

Ernesto Salazar
Ernesto Salazar
21,555 Points
Ernesto Salazar
Ernesto Salazar
21,555 Points

Hello, i think the main reason of this is because that the Courses component is already rendered in the application, so when you click again on courses link React does not see necesary to render the component again, but because you are matching just the "/courses" react-router unmounts the nested routed componentes.

So this also explains that when you reload the page for example in "/courses/css" the Courses component is mounted again so when it hits the <Redirect/> component it will redirect to the "/courses/html" section.

if i'm wrong please some one let us know :D