React router v6 路由与 Fallback

Question

如何在 react router v6 中实现带有回退的路由。我收到此错误：

未捕获错误：[RouteWithFallbackBoundary] 不是 <Route> 组件。 <Routes> 的所有子组件必须是 <Route> 或 <React.Fragment>

const RouteWithFallbackBoundary = (props: PathRouteProps) => (
    <Route {...props}>
        <MyErrorBoundary key={props.path}>
            <Suspense fallback={"loading"}>{props.children}</Suspense>
        </MyErrorBoundary >
    </Route>
);

const MY_ROUTES = {
    test: {
        path: '/test',
        component: lazy(() => import('../Component/Test')),
    }
}

  <Routes>
            <RouteWithFallbackBoundary path={MY_ROUTES.test.path}>
                <MY_ROUTES.test.component />
            </RouteWithFallbackBoundary>
  </Routes>

Answer 1

您只需要反转 Route 和 RouteWithFallbackBoundary 组件，这样 Route 就会呈现到 Routes 组件中。

示例：

const RouteWithFallbackBoundary = ({ children }) => (
  <MyErrorBoundary>
    <Suspense fallback={"loading"}>
      {children}
    </Suspense>
  </MyErrorBoundary >
);

...

<Routes>
  <Route
    path={MY_ROUTES.test.path}
    element={(
      <RouteWithFallbackBoundary>
        <MY_ROUTES.test.component />
      </RouteWithFallbackBoundary>
    )}
  />
</Routes>

React router v6 路由与 Fallback

React router v6 routes with Fallback

reactjs

react-router

react-router-dom