I created the component NotFound
and it works fine when I go to a page that doesn’t exist. But the same page it’s appearing in all my pages, not only the one that doesn’t exist. This is the component:
import React from 'react' const NotFound = () => <div> <h3>404 page not found</h3> <p>We are sorry but the page you are looking for does not exist.</p> </div> export default NotFound
And this is how I used it in the main page:
class MainSite extends Component { render () { return ( <div> {/* Render nav */} <Route path='/dashboard' component={Nav} /> <Route path='/retrospectives' component={Nav} /> <Route path='/users' component={Nav} /> <Route path='/projects' component={Nav} /> {/* Dashboard page */} <ProtectedRoute exact path='/dashboard' component={DashboardPage} /> {/* Retrospectives page */} <ProtectedRoute exact path='/retrospectives' component={RetrospectivesPage} /> {/* Users page */} <ProtectedRoute exact path='/users' component={UsersPage} /> {/* Projects page */} <ProtectedRoute exact path='/projects' component={ProjectsPage} /> {/* Retrospective related pages */} <Route exact path='/retrospectives/:retrospectiveId' component={Retrospective} /> <Route exact path='/join-retrospective' component={JoinRetrospective} /> <ProtectedRoute exact path='/create-retrospective/:retrospectiveId' component={Retrospective} /> {/* OnBoarding pages */} <ProtectedRoute exact path='/beta-code' component={BetaCodeAccess} /> <Route exact path='/auth-handler' component={AuthHandler} /> <Route exact path='/join-organization' component={JoinOrganization} /> </div> ) } } export default MainSite
As you can see I use <Route path="*" component={NotFound} />
to create the 404 pages, but that component is appearing in every existing page as well. How can I fix this?
Advertisement
Answer
Try this one:
import { Switch, Route } from 'react-router-dom'; <Switch> <Route path='/dashboard' component={Nav} /> <Route path='/retrospectives' component={Nav} /> <Route path='/users' component={Nav} /> <Route path='/projects' component={Nav} /> <Route path="" component={NotFound} /> </Switch>