Typescript 对未到达受保护路由的路由环境做出react

这是我的index.tsx

import ReactDOM from 'react-dom/client';
import App from './App';
import { PublicClientApplication } from '@azure/msal-browser';
import { MsalProvider } from '@azure/msal-react';
import { msalConfig } from './azureAuthConfig';

const msalInstance = new PublicClientApplication(msalConfig);

const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);

root.render(
  <MsalProvider instance={msalInstance}>
    <App />
  </MsalProvider>
);

这是我的应用程序.tsx

import { BrowserRouter, Routes, Route } from "react-router-dom"
import './App.css';
import Layout from './components/Layout';
import Home from './components/Home';
import AuthRequired from './components/AuthRequired';
import Usage from "./components/Usage";
import Login from "./components/Login";

export default function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Layout />}>
          <Route index element={<Home />} />
          <Route element={<AuthRequired />} >
            <Route path="usage" element={<Usage />} />
          </Route>
          <Route path="/login" element={<Login />} />
        </Route>
      </Routes>
    </BrowserRouter >
  );
}

这是我的Layout组件，我在其中定义了一些Outlet上下文.

import React from 'react';
import Header from "./Header"
import Footer from "./Footer"
import { Outlet } from 'react-router-dom';
import { ReportingPeriod, SelectedProjects } from '../types';
import { DefaultReportingPeriod } from '../utils';

export default function Layout() {
  // Set Context for the Pollination key
  const [pollinationKey, setPollinationKey] = React.useState<string>("")

  // Set reporting period to be used on the rest of the app
  const [reportingPeriod, setReportingPeriod] = React.useState<ReportingPeriod>({
    start: DefaultReportingPeriod().start,
    end: DefaultReportingPeriod().end
  });

  // Set Project names to be used on the rest of the app
  const [selectedProjects, setSelectedProjects] = React.useState<SelectedProjects>({});

  return (
    <>
      <Header />
      <Outlet
        context={{
          pollinationKey, setPollinationKey,
          reportingPeriod, setReportingPeriod,
          selectedProjects, setSelectedProjects
        }}
      />
      <Footer />
    </>
  )
}

我看到我可以在Login路由上成功访问此上下文，但不能在Usage路由上成功访问，这是一条受保护的路由.为什么会这样呢？

下面是我try 访问其中一个上下文值时收到的错误

未捕获的TypeError:无法分析的属性""reportingPeriod"" ‘(0， React_router_dom__WEBPACK_IMPORTED_MODULE_5__.useOutletContext)(...)‘ 因为它是未定义的.

我try 了以下几种方法:

1. 正如documentation所建议的，我确实在布局组件上创建了一个钩子，以便在Usage组件中使用.但没有奏效.结果是一样的.

2. 我try 将Usage路由从受保护的路由中删除，只是为了进行测试.啊，真灵.我能够访问这些价值.

3. 如果我使用React的Context API并使用如下所示的上下文提供程序包装BrowserRouter.有时灵

   export default function App() {
     return (
       <AppProvider>
         <BrowserRouter>
           <Routes>
             <Route path="/" element={<Layout />}>
               <Route index element={<Home />} />
               <Route element={<AuthRequired />} >
                 <Route path="usage" element={<Usage />} />
               </Route>
               <Route path="/login" element={<Login />} />
             </Route>
           </Routes>
         </BrowserRouter >
       </AppProvider>
     );
   }
   

如上所述，我非常希望使用Reaction路由V6的S插座上下文来实现此功能.