React router dom v5 default route doesn't work

Question

I'm using react router dom v5 with material ui, and I have my routes in the following way:

import React from 'react'
import { BrowserRouter, Route, Switch } from 'react-router-dom'
import Layout from '../components/layout'
import Login from '../screens/Login'
import NotFound from '../screens/NotFound'
import routes from './routes'

const DynamicRoutes = () => {
  return (
    <>
      {Object.values(routes).map(({ component, path }) => (
        <Route exact path={path} key={path} component={component} />
      ))}
    </>
  )
}

const Router = () => {
  return (
    <BrowserRouter>
      <Switch>
        <Route exact path="/login" component={Login} />
        <Layout>
          <DynamicRoutes />
        </Layout>
        <Route path="*" component={NotFound} />
      </Switch>
    </BrowserRouter>
  )
}

export default Router

I have already tried with <Route component={NotFound} />, and neither worked to me. Can anyone help me? The rest of routes work correctly, but when I type a fake route, doesn't go to the NotFound screen.

Hello, this looks like an interesting question to me. Thanks for sharing the solutions you already tried. My guess is that when you try the 'fake route' you actually do not type or mechanically redirect, but you try it from your `Layout` component by trying to redirect it inside the component. Am I right? — Giorgi Gvimradze, Sep 06 '20 at 19:28
Hi @GiorgiGvimradze, I'm in one of my defined routes, that is inside of the ```Layout``` component, and I want to load the ```NotFound``` component from there. Imagine that I'm on a route named ```/home```, that is inside of the ```Layout```, and then you type on the url ```/home/random-text```, then I don't get redirected to the ```NotFound``` screen. What could I do? — rubenmondom, Sep 06 '20 at 20:28
https://stackoverflow.com/questions/69162456/default-route-always-execute-in-react-router. Can anyone answer this question also? — Hassam Saeed, Sep 14 '21 at 06:33

Luis Paulo Pinto · Accepted Answer · 2020-09-07T13:59:07.570

4

That occurs because all children of a <Switch> should be <Route> or <Redirect> elements. You can check more about it in react-router-dom docs.

So, one solution for your code would be do something like that:

<BrowserRouter>
      <Switch>
        <Route exact path="/login" component={Login} />
        {Object.values(routes).map(({ Component, path }) => (
          <Route exact path={path} key={path}>
            <Layout>
              <Component />
            </Layout>
          </Route>
        ))}
        <Route path="*" component={NotFound} />
      </Switch>
</BrowserRouter>

*For your routes object array, Component property must be with an upper C.

You can check this sample code.

edited Sep 07 '20 at 13:59

answered Sep 07 '20 at 01:01

Luis Paulo Pinto

5,578
4
21
35

Thanks for your explanation , it works now, so the problem was that the children of the ```Switch``` was another component instead ```Route``` – rubenmondom Sep 07 '20 at 09:52
Hi @rubenmondom, yes, that´s right! *My sample code was with a wrong link. I just corrected it, sorry. – Luis Paulo Pinto Sep 07 '20 at 14:00
@LuisPauloPinto Can you please answer my question also? https://stackoverflow.com/questions/69162456/default-route-always-execute-in-react-router – Hassam Saeed Sep 14 '21 at 06:34

React router dom v5 default route doesn't work

1 Answers1