'react-router-dom 404 用於 subRoute

Question

我想為我的子路由設置一個 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 頁面

Answer 1

您有一個用於受保護路由的新 switch 語句，因此您必須在其中為 404 頁面添加另一個路由。

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

Answer 2

只需要刪除 =>

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

從我閱讀的官方文檔中，有一個示例說明 Switch 組件在 Suspense 組件中工作。