1

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.

Improve this question
2
  • Are these in a <Switch />? Commented Apr 22, 2018 at 21:26
  • Can you mark this as correct if it helped? Commented Apr 29, 2018 at 12:15

2 Answers 2

Reset to default
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.

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

Comments

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>
Improve this answer

1 Comment

thank you for keeping this discussion up to date :)

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.