React router 6 - 避免重新渲染嵌套子路由的父组件

Question

这是我的路线：

<Routes>
  <Route path="A">
    <Route path=":date" element={
      <ProviderA>
        <ProviderB>
          <Summary />
      </ProviderB>
    </ProviderA>
    }
    />
  </Route>
</Routes>

这是组件ProviderA:

const ContextAction = createContext({
  ...
});

const ContextValue = createContext({
  ...
});

export const ProviderA: React.FC<Props> = ({children}) => {
   const [state, setState] = useState('');

  return (
    <ContextAction.Provider value={setState}>
      <ContextValue.Provider value={state}>
        {children}
      </ContextValue.Provider>
    </ContextAction.Provider>
  );
};

这是组件 ProviderB:

const ContextAction = createContext({
  ...
});

const ContextValue = createContext({
  ...
});

export const ProviderB: React.FC<Props> = ({children}) => {
   const [state, setState] = useState('');

  return (
    <ContextAction.Provider value={setState}>
      <ContextValue.Provider value={state}>
        {children}
      </ContextValue.Provider>
    </ContextAction.Provider>
  );
};

我想要实现的是仅在 URL 中的日期发生更改时呈现 Summary。例如，URL 从 A/26-01-2024 更改为 A/25-01-2014 不应触发 ProviderA 的重新渲染；相反，它应该仅重新渲染子嵌套路由Summary。 希望以上内容是有道理的，即使它很棘手。

Answer 1

我想要实现的是当日期在 网址确实改变了。

这就是 React 的工作原理。如果您不希望

ProviderA

和

ProviderB

在路由重新渲染时重新渲染，请将它们移至 ReactTree 的更高位置。

我建议创建一个渲染提供者的布局路由和一个用于嵌套路由的

Outlet

。

示例：

import { Outlet } from 'react-router-dom';

export const ProviderLayout = () => (
  <ProviderA>
    <ProviderB>
      <Outlet />
    </ProviderB>
  </ProviderA>
);

<Routes>
  <Route path="A">
    <Route element={<ProviderLayout />}>
      <Route path=":date" element={<Summary />} />
    </Route>
  </Route>
</Routes>

如果重新渲染仍然是一个问题，那么继续将提供程序推到 ReactTree 上越来越高，直到它们从一个稳定的组件渲染，该组件在路由重新渲染时不会重新渲染。