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 okilydokily
okilydokily
12,105 Points

If we don't supply the 'exact' keyword to the <Route/> which renders a <Redirect> then the page wont redirect....

when we are in the Courses tab and then click on the courses tab again. So it doesn't show us the HTML component or anything.

But why do we need the exact keyword to prevent this behavior?

    <Route exact path="/courses" render={()=> <Redirect to="/courses/html" />}/>  
    <Route path="/courses/html" component={HTML}/>
    <Route path="/courses/css" component={CSS}/>
    <Route path="/courses/javascript" component={JavaScript}/>
okilydokily
okilydokily
12,105 Points

I think I sort of understand this. In the case of not using 'exact', if you are already in a path with 'courses' then there is no rerender.

1 Answer

Ben Slivinn
Ben Slivinn
10,156 Points
Ben Slivinn
Ben Slivinn
10,156 Points

When you use component (instead of render) the router uses React.createElement to create a new React element from the given component.

When using 'render=func', This allows for convenient inline rendering and wrapping without the undesired remounting explained above.

Instead of having a new React element created for you using the component prop, you can pass in a function to be called when the location matches (This why you need the exact, to match only '/courses' and not all other paths that begin the same). The render prop function has access to all the same route props (match, location and history) as the component render prop.

Hope it's clear now, Cheers!