React受保护路由无法正常渲染问题求助

问题描述 #

访问首页时一切正常，但进入PrivateRouter对应的受保护路由时，页面仅保留Header部分，路由内的h1标签内容完全不显示。

错误原因分析 #

1. React Router v6 路由写法错误：你的PrivateRouter内部嵌套了<Routes>和<Route>，但在v6版本中，受保护路由不需要这种嵌套结构，且你没有正确渲染传入的component属性，导致路由内容无法加载。
2. 登录状态判断逻辑不一致：PrivateRouter用localStorage.getItem('firstLogin')判断登录状态，而App组件中用auth.token控制Header显示，两者可能存在状态不同步的情况，引发逻辑冲突。

修复方案 #

1. 重构PrivateRouter组件 #

改成React Router v6推荐的受保护路由写法，直接通过children接收需要保护的组件，根据登录状态返回对应内容或跳转。

2. 统一登录状态判断依据 #

确保PrivateRouter和App组件使用相同的登录状态判断逻辑，避免状态不一致。

3. 调整App组件中的路由配置 #

正确使用PrivateRouter包裹需要保护的组件，替代原来的element={<PrivateRouter component={PageRender} />}写法。

修改后的代码 #

PrivateRouter.js

import React from 'react';
import { Navigate } from "react-router-dom";

const PrivateRouter = ({ children }) => {
  // 统一登录状态判断，可根据实际项目选择auth.token或localStorage的firstLogin
  const isAuthenticated = localStorage.getItem('firstLogin');
  // 若需和App中的auth.token同步，可改为：const isAuthenticated = auth.token;
  return isAuthenticated ? children : <Navigate to="/" />;
}

export default PrivateRouter;

App.js

return (
  <Router>
    <Alert />
    <input type="checkbox" id="theme" />
    <div className="App">
      <div className="main">
        {auth.token && <Header />}
        <Routes>
          <Route path="/" element={auth.token ? <Home /> : <Login />} />
          <Route path="/register" element={<Register />} />

          {/* 修改受保护路由的写法 */}
          <Route
            path="/:page"
            element={
              <PrivateRouter>
                <PageRender />
              </PrivateRouter>
            }
          />
          <Route
            path="/:page/:id"
            element={
              <PrivateRouter>
                <PageRender />
              </PrivateRouter>
            }
          />
        </Routes>
      </div>
    </div>
  </Router>
);

额外说明 #

• React Router v6中已移除exact属性，路由默认就是精准匹配，无需手动添加。
• 确保PageRender组件能正确接收路由参数（如page、id），可通过useParams()钩子获取。

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