javascript - react 路由器dom v5默认路由不起作用

Question

我正在使用带有 Material ui 的 react 路由器 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} /> ，而且对我都没有用。谁能帮我？其余路线正常工作，但是当我输入假路线时，不会转到 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>

*对于您的路线对象数组，组件属性必须带有一个上限 C .
您可以查看 sample代码。