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:
JavaScript
x
10
10
1
import React from 'react'
2
3
const NotFound = () =>
4
<div>
5
<h3>404 page not found</h3>
6
<p>We are sorry but the page you are looking for does not exist.</p>
7
</div>
8
9
export default NotFound
10
And this is how I used it in the main page:
JavaScript
1
38
38
1
class MainSite extends Component {
2
render () {
3
return (
4
<div>
5
{/* Render nav */}
6
<Route path='/dashboard' component={Nav} />
7
<Route path='/retrospectives' component={Nav} />
8
<Route path='/users' component={Nav} />
9
<Route path='/projects' component={Nav} />
10
11
{/* Dashboard page */}
12
<ProtectedRoute exact path='/dashboard' component={DashboardPage} />
13
14
{/* Retrospectives page */}
15
<ProtectedRoute exact path='/retrospectives' component={RetrospectivesPage} />
16
17
{/* Users page */}
18
<ProtectedRoute exact path='/users' component={UsersPage} />
19
20
{/* Projects page */}
21
<ProtectedRoute exact path='/projects' component={ProjectsPage} />
22
23
{/* Retrospective related pages */}
24
<Route exact path='/retrospectives/:retrospectiveId' component={Retrospective} />
25
<Route exact path='/join-retrospective' component={JoinRetrospective} />
26
<ProtectedRoute exact path='/create-retrospective/:retrospectiveId' component={Retrospective} />
27
28
{/* OnBoarding pages */}
29
<ProtectedRoute exact path='/beta-code' component={BetaCodeAccess} />
30
<Route exact path='/auth-handler' component={AuthHandler} />
31
<Route exact path='/join-organization' component={JoinOrganization} />
32
</div>
33
)
34
}
35
}
36
37
export default MainSite
38
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:
JavaScript
1
11
11
1
import { Switch, Route } from 'react-router-dom';
2
3
<Switch>
4
<Route path='/dashboard' component={Nav} />
5
<Route path='/retrospectives' component={Nav} />
6
<Route path='/users' component={Nav} />
7
<Route path='/projects' component={Nav} />
8
9
<Route path="" component={NotFound} />
10
</Switch>
11