路由组件中条件渲染失效问题求助

核心问题 #

1. localStorage读取时机错误：直接在组件顶层读取const User = JSON.parse(localStorage.getItem("user"));，只有组件初始化或页面刷新时才会重新读取，登录后localStorage更新不会触发组件重新渲染，导致userrole无法同步更新。
2. useEffect循环更新：useEffect的依赖包含userrole和ignored，但内部又调用setUserRole和forceUpdate，触发无限循环，严重拖慢性能。
3. Wildcard组件无返回值：组件内仅写了<Navigate to="/login" />但未return，导致404场景下无法跳转。
4. 路由结构冗余：多个<Route element={<RequireAuth />}>可以合并为一个父路由，减少重复代码。

修复步骤 #

1. 正确同步用户角色到state #

把用户信息读取逻辑放到useEffect中，监听localStorage变化（可选，应对其他页面修改localStorage的场景），同时避免循环依赖：

const [userrole, setUserRole] = useState("");

useEffect(() => {
  const updateUserRole = () => {
    const User = JSON.parse(localStorage.getItem("user"));
    setUserRole(User?.role || "");
  };

  // 初始化读取用户角色
  updateUserRole();
  // 监听localStorage变化，跨页面修改时同步角色
  window.addEventListener("storage", updateUserRole);

  return () => window.removeEventListener("storage", updateUserRole);
}, []); // 空依赖，仅组件挂载时执行一次

2. 移除forceUpdate，靠state更新触发渲染 #

直接删掉useReducer相关的forceUpdate代码——userrole是状态变量，它变化时组件会自动重新渲染，路由的条件判断也会随之生效。

3. 修复Wildcard组件 #

const Wildcard = () => {
  return <Navigate to="/login" />; // 必须return才能生效
};

4. 优化路由结构 #

将所有需要鉴权的路由放到同一个RequireAuth父路由下，简化结构：

<Routes>
  <Route path="/login" element={<Login />} />
  <Route path="/register" element={<Registration />} />
  {/* 统一鉴权父路由 */}
  <Route element={<RequireAuth />}>
    <Route 
      path="/" 
      element={userrole === "Browser" ? <ViewOnly /> : <InvoiceList2 />} 
    />
    <Route path="/admin" element={<Admin />} />
    <Route path="/manual" element={<ManualEntry />} />
  </Route>
  <Route path="/*" element={<Wildcard />} />
</Routes>

5. 可选：登录后主动更新角色 #

如果登录逻辑在Login组件内，登录成功后可以直接更新userrole，无需等待localStorage监听：

// 登录成功后示例代码
localStorage.setItem("user", JSON.stringify(userData));
// 直接更新角色状态
setUserRole(userData.role);

最终优化后的App组件代码 #

import React, { useEffect, useState } from "react";
import { BrowserRouter, Routes, Route, Navigate } from "react-router-dom";
import {
  useFetchVendorsQuery,
  useFetchInvoicesQuery,
  useFetchTrackersQuery,
} from "../src/features/Invoices/InvoiceSlice";

const ROLES = {
  User: "user",
  Admin: "Admin",
};

const Wildcard = () => {
  return <Navigate to="/login" />;
};

const App = () => {
  const GetVendors = useFetchVendorsQuery();
  const [vendors, setVendors] = useState([]);

  const GetTrackers = useFetchTrackersQuery();
  const [trackers, setTrackers] = useState([]);

  const GetInvoices = useFetchInvoicesQuery();
  const [invoices, setInvoices] = useState([]);

  const [userrole, setUserRole] = useState("");

  useEffect(() => {
    const updateUserRole = () => {
      const User = JSON.parse(localStorage.getItem("user"));
      setUserRole(User?.role || "");
    };

    updateUserRole();
    window.addEventListener("storage", updateUserRole);

    return () => window.removeEventListener("storage", updateUserRole);
  }, []);

  // 处理接口数据，请求成功时更新对应state
  useEffect(() => {
    if (GetVendors.isSuccess) setVendors(GetVendors.data);
    if (GetInvoices.isSuccess) setInvoices(GetInvoices.data);
    if (GetTrackers.isSuccess) setTrackers(GetTrackers.data);
  }, [GetVendors, GetInvoices, GetTrackers]);

  return (
    <div className="content">
      <BrowserRouter>
        {/* <Header /> */}
        <Routes>
          <Route path="/login" element={<Login />} />
          <Route path="/register" element={<Registration />} />
          <Route element={<RequireAuth />}>
            <Route
              path="/"
              element={userrole === "Browser" ? <ViewOnly /> : <InvoiceList2 />}
            />
            <Route path="/admin" element={<Admin />} />
            <Route path="/manual" element={<ManualEntry />} />
          </Route>
          <Route path="/*" element={<Wildcard />} />
        </Routes>
        <Footer1 />
      </BrowserRouter>
    </div>
  );
};

export default App;

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