جاوااسکریپت - مسیر پیشفرض React Router DOM نسخه ۵ کار نمیکند

من از react router dom نسخه ۵ با material ui استفاده میکنم و مسیرهای خود را به صورت زیر دارم:

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

من قبلاً با <Route component={NotFound} /> امتحان کردهام، و هیچکدام برای من کار نکرد. کسی میتواند کمکم کند؟ بقیه مسیرها درست کار میکنند، اما وقتی یک مسیر جعلی وارد میکنم، به صفحه NotFound نمیرود.

پاسخ شماره ۱

این اتفاق میافتد زیرا تمام فرزندان یک <Switch> باید عناصر <Route> یا <Redirect> باشند. شما میتوانید درباره آن بیشتر در مستندات react-router-dom مطالعه کنید.

بنابراین، یک راه حل برای کد شما این است که چیزی شبیه به این انجام دهید:

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

*برای آرایه شیء مسیرهای شما، ویژگی Component باید با حرف بزرگ C باشد.

شما میتوانید این کد نمونه را بررسی کنید.