反應路由器 dom v5 默認路由不起作用

Question

我正在使用帶有材料 ui 的 react router dom v5，並且我的路線如下：

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} /> ，但都沒有對我<Route component={NotFound} /> 。 誰能幫我？ 其余路線工作正常，但當我輸入假路線時，不會進入NotFound屏幕。

Answer 1

這是因為<Switch>所有子元素都應該是<Route>或<Redirect>元素。 您可以在 react-router-dom docs 中查看更多相關信息。

因此，您的代碼的一種解決方案是執行以下操作：

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

您可以檢查此示例代碼。