时间戳

首页 > 解决方案 > 'react-router-dom 404 for subRoute

reactjs - 'react-router-dom 404 for subRoute

问题描述

我想为我的子路由设置一个 404 页面有我的路由器

    <Router>
  <Suspense fallback={<Loader type="circle" />}>
    <Switch>
      <PublicRoute path="/" exact isAuthenticated={0}>
        <Home />
      </PublicRoute>
      <PublicRoute path="/login" exact isAuthenticated={0}>
        <Login />
      </PublicRoute>
      <PrivateRoute path="/private" isAuthenticated={1}>
        <ProtectedRoutes />
      </PrivateRoute>
      <Route>
        <NotFound />
      </Route>
    </Switch>
  </Suspense>
</Router>

对于我的公共路线，我的组件正在工作

但是对于我的 ProtectedRoute =>

 const ProtectedRoute = () => (
  <Switch>
    <Suspense fallback={<Loader type="circle" />}>
      {routes.map(({ component: Component, path, exact }) => (
        <Route path={`/private/${path}`} key={path} exact={exact}>
          <Component />
        </Route>
      ))}
    </Suspense>
  </Switch>
);



   const routes = [
  {
    path: 'test',
    component: lazy(() => import('../components/private/logged/index')),
  },
  {
    path: 'otherTest',
    component: lazy(() => import('../components/private/logged/index')),
  }
];

我尝试了很多解决方案，但我卡住了，当用户在 XXXXX/private/ 中走错路线时，我不知道该怎么做才能创建 404 页面

标签： reactjsreact-routerreact-router-dom

解决方案

只需要删除=>

   <Suspense fallback={<Loader type="circle" />}> && </Suspense>

从我阅读的官方文档中，有一个例子是 Switch 组件在 Suspense 组件中工作。

推荐阅读