React Router throwing [undefined] is not a react component

Question

I am migrating from react-router-dom v5 to v6. while running the server it throws the error: history.ts:494 Uncaught Error: [undefined] is not a <Route> component. All component children of <Routes> must be a <Route> or <React.Fragment>

Here is my code: router.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 }}
          />
        )
      }
    />
  )
}

checked log to make sure the data is getting back and not giving undefined. checked the router dob doc to make sure the implementation is correct.

Answer 1

I was able to find out why it was throwing the error, so thought that i would answer the question myself. The issue was AuthRoute.tsx, it should have passed as an element of the <Route />

example:

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