时间戳

首页 > 解决方案 > 反应路由器dom v5默认路由不起作用

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

问题描述

我正在使用带有材料 ui 的反应路由器 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屏幕。

标签： javascriptreactjstypescriptreact-routerreact-router-dom

解决方案

发生这种情况是因为 a 的所有子级都<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>

*对于您的路线对象数组，组件属性必须带有一个上部C。

您可以查看此示例代码。

推荐阅读