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 Going Further with Routing Displaying 404 Error Routes using Switch

Posted by john mendez
john mendez
Courses Plus Student 233 Points

Switch works for incorrect or broken links except for when a nested url is entered ?

My main entry point , which is app.js, consist of this 

        <BrowserRouter >
            <div>
                    <div className='container-wrapper'>
                    <Route  component={ Header } />
                    <Switch>
                        <Route exact path='/' render={ () => ( <Redirect to='/Dashboard' /> ) } />
                        <Route path='/Dashboard' component={ Dashboard } />
                        <Route path='/Upload' component={ Uploader } />
                        <Route component={NotFound} />

                    </Switch>
                    </div>
            </div>
        </BrowserRouter>

non existing links or broken links are redirected to the NotFound component except for when a nested url or second directory is entered, whether it exist or not... for example /helereierneri will be directed to the not found component, but /helereierner/heller doesnt, .. How does this work ???

Karan Nahar
Karan Nahar
16,157 Points
Karan Nahar
Karan Nahar
16,157 Points

Use exact path when you want /helereierner/heller to also return NotFound component.

<Route exact path='/Dashboard' component={ Dashboard } />
<Route exact path='/Upload' component={ Uploader } />

If you don't include exact and and do Dashboard/eeeee in your URL it will return Dashboard component. And when you include exact and do Dashboard/eeeee in your URL it will return NotFound component.

1 Answer

Tim Williams
PLUS
Tim Williams
Courses Plus Student 9,267 Points
Tim Williams
Tim Williams
Courses Plus Student 9,267 Points

To add to the answer given by Karan, you need to import NotFound to the child component which contains the final locations of the nested routes. The Courses route in App.js should not be made to be "exact" as it contains a component which contains additional routes. Routes in Courses.js need to all be made exact. in here is where we will import the NotFound and make it a route to switch to. Now if we add anything else besides /html, /javascript, /css it will route to 404. Additionally the original example will still work as well where anything besides the header links will still throw an error.

Also, no need to add switch in the Courses.js as its taken care of when its pulled into App.js.

Joseph Butterfield
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Joseph Butterfield
Full Stack JavaScript Techdegree Graduate 16,430 Points
Joseph Butterfield
.a{fill-rule:evenodd;}techdegree seal-36
Joseph Butterfield
Full Stack JavaScript Techdegree Graduate 16,430 Points

This still renders the Courses component <h2> tag and HTML/CSS/Javascript sublinks within the page, rather than rendering just the 404 page. The redirect within the Courses.js component only redirects if '/courses' is the url path, in which case '/courses/html' will render. Adding the 'exact' tag within the App.js file for the Courses route works as it bypasses rendering any portion of the Course component and loads the 404 only.