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 Routing Challenge – Solution

JONATHAN MOO
JONATHAN MOO
9,224 Points
Posted by JONATHAN MOO
JONATHAN MOO
9,224 Points

Why does the "exact" keyword in the Route tags within the App.js affect the Routes in the Courses.js?

Basically when I include the "exact" keywords within the App.js for the About, Teachers and Courses Route tags, the Routes within the Courses.js refused to load the components.

Why is this behavior so?

1 Answer

apalm
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
apalm
Full Stack JavaScript Techdegree Graduate 27,641 Points
apalm
.a{fill-rule:evenodd;}techdegree seal-36
apalm
Full Stack JavaScript Techdegree Graduate 27,641 Points

It's because the exact keyword is not needed for all of those routes. It is only needed for the / home component route. This is because all of the routes contain the /, so the Home navigation button would remain highlighted even when the user clicks on a different navigation tab.

The routes within Courses.js are not rendering because using the exact keyword tells React Router to only display the routes when the path matches /courses. The routes within Courses.js do not match that exact path as they are /courses/Course, /courses/CSS, etc.

So a working example would look like this:

<Route exact path ="/" component={Home} />
<Route path="/courses/Course" component={Course} />
<Route path="/courses/CSS" component={CSS} />
and so on ...
Simon Olsen
Simon Olsen
3,597 Points
Simon Olsen
Simon Olsen
3,597 Points

Thanks for answering. I had this same issue. Removing "exact" from all <Route/> tags in App.js except the Home <Route/> got my Course sub-pages to display.