React中如何在组件渲染前请求认证API实现路由权限控制？

我的应用采用 Laravel(API服务器) + React(前端) 的架构，需求是限制未认证用户访问App的/admin路由，当前代码逻辑为根据userInfo的isSignedIn状态判断是否跳转。

为实现该需求，需在App组件渲染前请求认证API。我的首次尝试是将异步请求函数作为setState的初始值，但发现初始状态不能为异步函数；也曾尝试在useEffect中调用axios请求，但担心会导致过多重渲染。

请问：通过API获取认证信息的最常用方式是什么？

相关代码示例 #

function App() {
  const [userInfo, setUserInfo] = setState({isSignedIn: false});
  return (
    <Routes>
      <Route path="/admin/*" element={ userInfo.isSignedIn? <Admin />: <Navigate replace to="/home/sign-in"/> } />
      <Route path="/home/*" element={<Home />} />
    </Routes>
  );
}

首次尝试代码 #

function App() {
  const requestUserInfo = async() => {
    const result = await axios.get("/auth");
    return result.data;
  }
  const [userInfo, setUserInfo] = setState(requestUserInfo);
  return (
    <Routes>
      <Route path="/admin/*" element={ userInfo.isSignedIn? <Admin />: <Navigate replace to="/home/sign-in"/> } />
      <Route path="/home/*" element={<Home />} />
    </Routes>
  );
}

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