如何在同一页面使用layout和provider？

Question

我有一个提供程序，它向服务器发出请求以刷新令牌并具有一些值。我还有一个带有侧边栏的简单布局。我只想在一条路线中使用它们。不知道在哪里添加布局，我已经在提供程序中使用了 Outlet

提供者：

export const AuthProvider: FC = () => {
  const [isUserLoged, setIsUserLoged] = useState(false)
  const [isAppReady, setIsAppReady] = useState(false)

  useEffect(() => {
    AuthClient.post("/refresh").then((res: AxiosResponse) => {
      const {accessToken, accessTokenExpiration} = res.data;

      inMemoryJWT.setToken(accessToken, accessTokenExpiration)

      setIsAppReady(true)
      setIsUserLoged(true)
    }).catch((err) => {
      setIsAppReady(true)
      toast.error(err.response.data.error)
    })
  }, [])

  useEffect(() => {
    const handlePersistedLogOut = (e: StorageEvent) => {
      if(e.key === config.LOGOUT_STORAGE_KEY) {
        inMemoryJWT.deleteToken()
        setIsUserLoged(false)
      }
    }

    return window.addEventListener("storage", handlePersistedLogOut)
  }, [])

  return (
    <AuthContext.Provider
      value={{
        isAppReady,
        isUserLoged,
      }}
    >

    <Outlet />
    
    </AuthContext.Provider>
  );
};

路由：

export const Routers: FC = () => {
    return (
        <BrowserRouter>
            <Routes>
                <Route path="/" element={<AuthProvider />}>
                    <Route path="/home" element={<div>Home</div>} />
                </Route>

                <Route path="/auth" element={<Auth />} />

                <Route path="*" element={<ErrorPage message="Страница не найдена!" status={404} />} />
            </Routes>
        </BrowserRouter>
    )
}

Answer 1

有什么理由你不能这样做吗：

<Routes>
   <Route path="/" element={<AuthProvider><Layout><div>Home</div></Layout></AuthProvider>}>
</Route>

然后在提供程序和布局组件中使用

children

属性？