Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

JavaScript React Router 4 Basics Going Further with Routing Displaying 404 Error Routes using Switch

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,147 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

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

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.