React组件结合Context与Router分离路由时出现无限重渲染问题求助

看起来你遇到的组件持续重渲染问题，核心是两个因素共同导致的：

1. Provider 嵌套层级引发的重复挂载 #

你把TrackedSitesProvider放在了NonLandingPages组件内部，而NonLandingPages本身是一个路由匹配组件。当你在非首页的路由之间切换时，NonLandingPages作为父路由容器，会因为路由匹配状态的变化频繁重新渲染，这就导致内部的TrackedSitesProvider也被反复销毁重建——而所有依赖这个Context的组件，都会因为Provider的重建触发重渲染。

2. Context Value 的引用不稳定 #

你在Provider中直接传入了一个字面量对象{ trackedSites, setTrackedSites, updateTrackedSites }，由于对象是引用类型，每次组件渲染时这个字面量都会生成一个新的引用。哪怕trackedSites等值完全没变化，Context也会认为“值更新了”，进而触发所有消费组件的重渲染。

修复步骤 #

第一步：调整 Provider 的层级

把TrackedSitesProvider提升到Router的外层，确保它只会在应用初始化时挂载一次，不会随着路由切换被反复重建。这样既保留了你拆分路由的结构，又能稳定Context的存在：

return (
  <div className='app-basic-appearance'>
    <TrackedSitesProvider value={{ trackedSites, setTrackedSites, updateTrackedSites }} >
      <Router>
        <Switch>
          <Route exact path='/'>
            <LandingPage/>
          </Route>
          <Route component={NonLandingPages} />
        </Switch>
      </Router>
    </TrackedSitesProvider>
  </div>
);

第二步：稳定 Context Value 的引用

用useMemo缓存Context的value对象，只有当依赖的状态或函数发生变化时，才重新生成这个对象。这能彻底避免因为引用变化导致的无意义重渲染：

import { useMemo } from 'react';

// ... 你的其他代码

const contextValue = useMemo(() => ({
  trackedSites,
  setTrackedSites,
  updateTrackedSites
}), [trackedSites, setTrackedSites, updateTrackedSites]);

return (
  <div className='app-basic-appearance'>
    <TrackedSitesProvider value={contextValue} >
      <Router>
        <Switch>
          <Route exact path='/'>
            <LandingPage/>
          </Route>
          <Route component={NonLandingPages} />
        </Switch>
      </Router>
    </TrackedSitesProvider>
  </div>
);

额外优化（可选）

如果消费Context的组件本身还有其他可能引发重渲染的因素，可以用React.memo包裹组件，进一步减少不必要的渲染：

const YourConsumerComponent = React.memo(() => {
  const trackedSitesContext = useTrackedSites();
  // ... 组件逻辑
});

内容的提问来源于stack exchange，提问作者Aleksa Tešić