javascript - La ruta predeterminada de React router dom v5 no funciona

Estoy usando react router dom v5 con material ui, y tengo mis rutas de la siguiente manera:

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

Ya he probado con <Route component={NotFound} />, y ninguno me funcionó. ¿Alguien puede ayudarme? El resto de las rutas funcionan correctamente, pero cuando escribo una ruta falsa, no va a la pantalla NotFound.

Respuesta #1

Eso ocurre porque todos los hijos de un <Switch> deberían ser elementos <Route> o <Redirect>. Puedes consultar más sobre esto en la documentación de react-router-dom.

Entonces, una solución para tu código sería hacer algo así:

<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>

*Para tu array de objetos de rutas, la propiedad Component debe comenzar con una C mayúscula.

Puedes revisar este código de ejemplo.