React Router 404 page

Question

I am currently experiencing some issues regarding react router displaying of 404 not found-pages. This is the code I have so far:

 <Route path="/home" component={Home} exact={true}/>
 <Route path="/admin/forgot-password" component={AdminResetPassword} exact={true}/>
 <Authentication path="/admin/welcome" component={AdminWelcome} exact={true}/>
 <Authentication path="/admin/dashboard" component={AdminDashboard} exact={true}/>

However, if I try to do something like this:

<Route path="/home" component={Home} exact={true}/>
<Route path="/admin/forgot-password" component={AdminResetPassword} exact={true}/>
<Route path="*" component={Page404}/>
<Authentication path="/admin/welcome" component={AdminWelcome} exact={true}/>
<Authentication path="/admin/dashboard" component={AdminDashboard} exact={true}/>

The ting is, it works - but only for the pages that is not wrapped in authentication. In other words, if I was to try to navigate to an admin page, it just says 404 page not found. How would I fix this?

Help would be very appreciated.

Are these in a <Switch />?

Colin Burke
– Colin Burke

2018-04-22 21:26:06 +00:00
Commented Apr 22, 2018 at 21:26 — Colin Burke
– Colin Burke, Commented Apr 22, 2018 at 21:26
Can you mark this as correct if it helped?

Colin Burke
– Colin Burke

2018-04-29 12:15:03 +00:00
Commented Apr 29, 2018 at 12:15 — Colin Burke
– Colin Burke, Commented Apr 29, 2018 at 12:15

Colin Burke · Accepted Answer · 2018-04-22 21:28:05Z

5

You can use <Switch />:

<Switch>
    <Route path="/home" component={Home} exact={true}/>
    <Route path="/admin/forgot-password" component={AdminResetPassword} exact={true}/>
    <Authentication path="/admin/welcome" component={AdminWelcome} exact={true}/>
    <Authentication path="/admin/dashboard" component={AdminDashboard} exact={true}/>
    <Route component={Page404}/>
</Switch>

If none of the paths before the last one match, the Page404 will be shown.

answered Apr 22, 2018 at 21:28

Colin Burke

17.3k13 gold badges57 silver badges84 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

kevinnlsamuel · Accepted Answer · 2022-01-10 01:28:43Z

1

Starting from React Router v6, "Not Found" Routes can be used to achieve this

Syntax

<Route path="*" element={<NoMatch />} />

Example

<Routes>
  <Route path="/" element={<Layout />}>
  <Route index element={<SneakerGrid />} />
  <Route path="/sneakers/:id" element={<SneakerView />} />
 
  <Route path="*" element={<NoMatch />} />

</Routes>

edited Jan 10, 2022 at 1:28

kevinnlsamuel

7754 silver badges19 bronze badges

answered Jan 7, 2022 at 12:57

Ramdas Hedgapure

93 bronze badges

1 Comment

kevinnlsamuel Over a year ago

thank you for keeping this discussion up to date :)

Collectives™ on Stack Overflow

React Router 404 page

2 Answers 2

Comments

Syntax

Example

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Syntax

Example

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related