React懒加载私有路由跳转空白页问题排查

我正尝试在项目中实现带懒加载的私有路由以保护应用，但使用私有路由导航时，页面跳转为空白且无报错。

代码示例 #

App.js #

function App() {
  return (
    <>
      <div>
        <BrowserRouter>
          <main>
            <Routes>
              <Route
                path="/"
                element={
                  <Suspense fallback={<>>...</>}>
                    <HomePage />
                  </Suspense>
                }
              />
              <Route path="/purchaseOrders" element={<PrivateRoute />}>
                <Route
                  path="/purchaseOrders"
                  element={
                    <Suspense fallback={<>>...</>}>
                      <PurchaseOrders />
                    </Suspense>
                  }
                />
              </Route>
              <Route path="*" element={<HomePage />} />
            </Routes>
          </main>
        </BrowserRouter>
      </div>
    </>
  );
}

privateroute.js #

const PrivateRoute = () => {
  const auth = localStorage.getItem("token") == null ? false : true;
  return auth ? <Outlet /> : <Link to={Config.loginUrl} />;
};

export default PrivateRoute;

页面空白的核心问题有两个：

1. 嵌套路由路径配置错误 #

React Router 中，嵌套子路由的path应该使用相对路径，而非绝对路径。你当前子路由写了path="/purchaseOrders"，会和父路由的路径冲突，导致Outlet无法正确渲染子组件内容。

2. 未正确实现未授权跳转 #

Link是需要用户点击的跳转链接，而非自动导航组件，未授权时应该用Navigate实现自动跳转，否则不会触发页面跳转，也可能导致空白。

修改后的代码 #

App.js 路由配置

function App() {
  return (
    <>
      <div>
        <BrowserRouter>
          <main>
            <Routes>
              <Route
                path="/"
                element={
                  <Suspense fallback={<>>...</>}>
                    <HomePage />
                  </Suspense>
                }
              />
              <Route path="/purchaseOrders" element={<PrivateRoute />}>
                {/* 子路由改为相对路径 "" */}
                <Route
                  path=""
                  element={
                    <Suspense fallback={<>>...</>}>
                      <PurchaseOrders />
                    </Suspense>
                  }
                />
              </Route>
              <Route path="*" element={<HomePage />} />
            </Routes>
          </main>
        </BrowserRouter>
      </div>
    </>
  );
}

PrivateRoute 组件

import { Outlet, Navigate } from 'react-router-dom';

const PrivateRoute = () => {
  const isAuthenticated = localStorage.getItem("token") !== null;
  // 用Navigate实现自动跳转，replace避免回退时回到未授权页面
  return isAuthenticated ? <Outlet /> : <Navigate to={Config.loginUrl} replace />;
};

export default PrivateRoute;

额外检查点 #

• 确保PurchaseOrders是通过懒加载导入的：const PurchaseOrders = React.lazy(() => import('./PurchaseOrders'));，否则Suspense的加载提示不会生效。
• 确认Config.loginUrl配置的路由存在，避免跳转后出现404。

内容的提问来源于stack exchange，提问作者Ofir Sasson