javascript - Ruta implicită în React Router DOM v5 nu funcționează

Folosesc react router dom v5 cu material ui și am rutele mele în felul următor:

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

Am încercat deja cu <Route component={NotFound} />, și niciunul nu a funcționat pentru mine. Poate cineva să mă ajute? Restul rutelor funcționează corect, dar când tastez o rută falsă, nu merg la ecranul NotFound.

Răspuns #1

Acest lucru se întâmplă deoarece toate elementele copil ale unui <Switch> ar trebui să fie elemente <Route> sau <Redirect>. Poți verifica mai multe despre asta în documentația react-router-dom.

Deci, o soluție pentru codul tău ar fi să faci ceva de genul acesta:

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

*Pentru array-ul de obiecte routes, proprietatea Component trebuie să fie cu literă mare C.

Poți verifica acest cod de exemplu.