如何通过React Router 6的<Outlet>避免嵌套子路由父组件重渲染

要实现URL中date参数变化时仅重渲染Summary组件，核心是把不随参数变化的部分（Wrapper、ProviderA、ProviderB）放到父路由，仅将需要响应参数变化的Summary作为子路由的元素，利用React Router 6的<Outlet>承载子路由内容。

1. 修改路由配置 #

调整路由结构，将Wrapper和ProviderB移到父路由的element中，子路由仅保留Summary：

<Routes>
  <Route path="A" element={
    <Wrapper>
      <ProviderB>
        <Outlet /> {/* 子路由内容会渲染在这里 */}
      </ProviderB>
    </Wrapper>
  }>
    {/* 子路由仅负责渲染需要响应参数变化的Summary */}
    <Route path=":date" element={<Summary />} />
  </Route>
</Routes>

2. 为什么这样能解决问题？ #

• 父路由path="A"不包含:date参数，当URL中date变化时，父路由的匹配状态不会改变，因此父路由的element（Wrapper、ProviderA、ProviderB）不会触发重渲染。
• 只有子路由path=":date"会因为参数变化重新匹配，其对应的element（Summary）会单独重渲染，完全符合需求。

3. 额外注意点 #

如果ProviderB需要依赖date参数（比如初始化状态时用到），可以在ProviderB内部通过useParams()获取参数，但这会导致ProviderB随参数变化重渲染。如果要避免这种情况：

• 可以将参数相关的逻辑下移到Summary组件中处理；
• 或者用React.memo包裹ProviderB，并确保其依赖项稳定（比如把useParams()返回的date用useMemo处理）。

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