React Router父路由rootLoader子路由导航时重复执行如何解决？

这是React Router的预期行为吗？ #

是的，这是React Router的预期设计。当使用嵌套路由时，只要父路由的element（也就是你的<Home />组件）在当前导航的页面中依然被渲染（比如访问/pokemon/:name时，Home作为父组件包裹Pokemon内容），父路由的loader就会在每次导航时重新执行。React Router这样设计是为了确保父路由依赖的数据始终保持最新，避免过期数据的问题。

能否阻止父路由loader运行？ #

可以，通过调整路由结构来实现：

• 将rootLoader移到子路由：如果rootLoader的数据只在WelcomePage中使用，把它从父路由移到WelcomePage对应的index路由上，这样只有访问首页时才会触发该loader，导航到Pokemon页面时不会执行。
  调整后的路由示例：

  const router2 = createBrowserRouter(
    createRoutesFromElements(
      <Route path='/' errorElement={<Error />}>
        <Route element={<Home />}>
          {/* 将rootLoader移到这里 */}
          <Route element={<WelcomePage />} index loader={rootLoader} />
          <Route
            element={<Pokemon />}
            loader={pokemonLoader}
            path='pokemon/:name'
          />
        </Route>
      </Route>
    )
  )
  

• 拆分嵌套路由：如果Home组件不需要在Pokemon页面中渲染，可以把两个路由改成同级结构，彻底分离父路由的loader影响。

用useEffect实现数据加载更合适吗？ #

这取决于你的场景：

• 推荐用Loader的场景：如果是页面渲染前必须的关键数据，Loader是更好的选择——它会在组件渲染前预加载数据，避免组件渲染后再请求数据导致的加载态闪烁；同时能配合errorElement统一处理加载错误，还支持React Router的数据缓存机制（相同路由参数下可能复用已有数据）。
• 适合useEffect的场景：如果是客户端侧的非关键数据（比如页面渲染后再加载的次要内容），或者数据依赖组件内的状态/ props，这时用useEffect更灵活。

内容的提问来源于stack exchange，提问作者Joshua Ubani-Wokoma