你可以创建一个protected route组件，它读取接收到的后端数据对象，并将其与当前访问的路由路径进行比较。这是一个使用React上下文提供用户数据值并将Users组件重构为路由保护组件的示例，因为它是嵌套用户子路由的布局路由。

const UserContext = createContext({
  user: null
});

const useUserContext = () => useContext(UserContext);

const UserContextProvider = ({ children }) => {
  const [user, setUser] = useState(null);

  ... Logic to set/clear the fetched user route access data

  return (
    <UserContext.Provider value={{ user }}>
      {children}
    </UserContext.Provider>
  );
};

<Routes>
  ...
  <Route path="/home" element={<Users />}>
    <Route path="dashboard" element={<Dashboard />} />
    <Route path="people" element={<People />} />
    <Route path="subject" element={<Subject />} />
    ...
  </Route>
  ...
</Routes>

const Users = () => {
  const { pathname } = useLocation();
  const { user } = useUserContext();

  const canAccessRoute = user?.menus.some(({ uri }) => uri === pathname);

  ...

  return canAccessRoute ? (
    <>
      ... Users UI ...
      <Outlet />
    </>
  ) : (
    <Navigate to="/" replace />
  );
};