React Router 抛出 [未定义] 不是一个 React 组件

Question

我正在从react-router-dom v5迁移到v6。运行服务器时会抛出错误：

history.ts:494 Uncaught Error: [undefined] is not a <Route> component. All component children of <Routes> must be a <Route> or <React.Fragment>

这是我的代码： 路由器.tsx

const routes: Routes[] = [
  // redirect root page according to the user role
  {
    path: '/',
    component: RedirectRootPath,
    exact: true,
  },

const router: React.FC = () => (
  <Suspense fallback={<Loader spinning />}>
      <BrowserRouter>
        <IndexLayout>
          <ReactRoutes>
            {routes.map(route => {
              return route.requiredPermission ? (
                <AuthRoute
                  path={route.path}
                  Component={route.component}
                  key={route.path}
                  exact={route.exact}
                  requiredPermission={route.requiredPermission}
                />
              ) : (
                <Route
                  path={route.path}
                  element={<route.component />}
                  key={route.path}
                  // exact={route.exact}
                />
              )
            })}
            <Route path='/403' element={<UnAuthorizedPage />} />
            <Route element={<NotFoundPage />} />
          </ReactRoutes>
        </IndexLayout>
      </BrowserRouter>
  </Suspense>
)

export default router

AuthRoute.tsx

const AuthRoute: React.FC<AuthRouteProps> = ({
  Component,
  path,
  exact = false,
  requiredPermission,
  user,
}) => {

  return (
    <Route
      path={path}
      element={
        isAuthorized && userHasRequiredPermission && !isPermissionsLoading ? (
          <Component />
        ) : isPermissionsLoading ? (
          <Loader spinning />
        ) : (
          <Navigate
            to={userHasRequiredPermission ? '/user/login/' : '/404'}
            state={{ requestedPath: path }}
          />
        )
      }
    />
  )
}

检查日志以确保数据已返回并且未给出未定义。 检查路由器 dob 文档以确保实现正确。

Answer 1

我能够找出它抛出错误的原因，所以我想我会自己回答这个问题。问题是

AuthRoute.tsx

，它应该作为

的一个元素通过

示例：

<Route
   key={route.path}
   path={route.path}
   element={
    <AuthRoute
      path={route.path}
      Component={route.component}
      exact={route.exact}
      requiredPermission={route.requiredPermission}
    />
  }
/>