嵌套时将道具传递给 Outlet，以便我可以使用 componentDidUpdate答案

【问题标题】：Passing props to Outlet when nesting so I could use componentDidUpdate嵌套时将道具传递给 Outlet，以便我可以使用 componentDidUpdate
【发布时间】：2022-01-04 13:19:52
【问题描述】：

我正在使用 react-router-v6，但我的设置有问题。我正在使用具有以下设置的布局的嵌套路由。

App.js

<BrowserRouter>
      <Routes>     
        <Route exact path='/' element={<SiteLayout />} />
      </Routes>
      <Routes>
        <Route path='/app/' element={<AppLayout />} >
          <Route path='dashboard' element={<Dashboard />} />
          <Route path='send' element={<Send />} />
        </Route>
      </Routes>
    </BrowserRouter>

AppLayout 是一个类元素，有一些状态变量和数据获取即时通过<Outlet /> 使用上下文传递给仪表板组件。这工作正常，但仪表板组件应该能够在新数据到达时使用从 AppLayout 传递的数据进行自己的休息调用。我打算在仪表板组件中使用 componentDidUpdate，但我理解它不适用于上下文？因此，每次我将上下文传递给仪表板时，它都不会获取数据并且不会更新。我怎么能从这里继续？我在这里 atm 撕裂我的头发：D 试图弄清楚如何使用它。有没有其他方法可以在类组件获取新数据时自动运行函数？

【问题讨论】：

标签： javascript reactjs react-router react-router-v6

【解决方案1】：

只需这样做。

<BrowserRouter>
      <Routes>     
        <Route exact path='/' element={<SiteLayout />} />
        <Route path='/app/' element={<AppLayout />} />
        <Route path='/app/dashboard' element={<Dashboard />} />
        <Route path='/app/dashboard/send' element={<Send />} />
      </Routes>
</BrowserRouter>

【讨论】：

感谢您指出这一点，但我喜欢让仪表板使用 AppLayout 并作为布局发送 :) 不确定这是否有助于将道具传递给 <Outlet />？我可以从 App.js 传递道具，只是将它放在元素标签 (element={<Dashboard myProps=someProps}) 中的组件内，但我不想从具有仪表板和发送为子级的 AppLayout 组件中移动很多状态等。 AppLayout 中还有一个下拉菜单可将数据发送给其子级。