Is there a way to define default route (if no one match) in react-router-redux@5.0.0

Question

Im using react-router-redux@5.0.0

I have this

<Route path='/login' component={ Login } />
<Route exact path='/' component={ Home } />

Is there a way to define default route as in react-router-redux@4.x.x?

It is also necessary this "default route" does not pass if any other matched.

Because if I will add

<Route path='/login' component={ Login } />
<Route exact path='/' component={ Home } />
<Route component={ Default } />

Default component will be rendered for all routes, including '/login' and '/'

Yeah. Without setting a path, it would work. – Ademola Adegbuyi Apr 06 '18 at 10:42 — Ademola Adegbuyi, Apr 06 '18 at 10:42

Mikser · Answer 1 · 2020-11-05T20:02:29.253

I was looking for answer for the same problem but for react-router-dom package. The solution was this:

<Switch>
  <Route path='/login' component={ Login } />
  <Route exact path='/' component={ Home } />
  <Route component={ Default } />
</Switch>

This way the first Route that matches will be displayed while the rest ignored.

You can import Switch together with Route like this:

import { BrowserRouter, Switch, Route } from 'react-router-dom';

John · Answer 2 · 2018-04-06T11:37:26.740

0

Place the following catch-all route after all other routes are defined (optionally leave the path out as stated below):

<Route path="*" component={DefaultRoute} />

Here's a link to an answer with more details: React-Router: No Not Found Route?

edited Apr 06 '18 at 11:37

answered Apr 06 '18 at 10:40

John

catch all route will be displayed along with matched routes – Mikser Nov 05 '20 at 19:31
Instead of defining a default component, it is also possible to define a custom message
PAGE NOT FOUND :(
} /> – mnagdev Jun 02 '22 at 03:23

score 0 · Answer 3 · edited Jan 10 '22 at 00:04

0

With latest react-router version,

<Route path='' Componenet={Default}>

should be changed to,

<Route path='' element={<Default>}>

edited Jan 10 '22 at 00:04

cigien

answered Jan 09 '22 at 19:30

shehan chanuka

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Jan 10 '22 at 04:06
In react-router-dom 5, we could do : ... { return(
Page not found :(
) }} /> Is there a way to use a similar syntax in the latest react-router-dom?I am trying the above but it's not working – mnagdev Jun 02 '22 at 03:18

3 Answers3