React Router v6如何为两路由包裹Context避免useEffect重复触发

该需求可以完全实现，不需要额外引入第三方库，用React Router v6原生的布局路由能力即可满足所有要求。
之前单独给两个路由包裹Context导致useEffect重复触发的核心原因是：平级路由切换时，React会卸载上一个路由的完整节点树（包括其中包裹的Provider实例），再挂载新路由的全新节点树，两个路由下的Provider是完全独立的实例，切换自然会触发卸载重挂、useEffect重复执行。

利用React Router v6的布局路由特性：

• 将需要共享Context的两个路由归为同一组父路由的子路由
• 父路由不配置path属性，仅作为逻辑容器，负责挂载Context Provider，通过<Outlet />渲染匹配到的子路由
• 不需要访问Context的路由（登录、通配重定向等）和该布局路由保持平级，访问这些路由时不会触发布局路由挂载，Provider自然不会加载
• 同组子路由互相切换时，父布局路由会保持挂载状态，Provider实例不会销毁重建，内部useEffect自然不会重复触发

改造后的路由代码如下：

import { Routes, Route, Navigate, Outlet } from 'react-router-dom';
// 替换为你自己项目中Context Provider的引入路径
import { PracelContextProvider } from './context/PracelContext';
import Layout from './components/Layout';
import LoginPage from './pages/LoginPage';
import PracelsPage from './pages/PracelsPage';
import SearchPracelPage from './pages/SearchPracelPage';

// 共享Context的布局容器
const PracelContextLayout = () => {
  return (
    <PracelContextProvider>
      <Outlet />
    </PracelContextProvider>
  )
}

function App() {
  return (
    <Layout>
      <Routes>
        {/* 不需要Context的路由与布局路由平级，访问时不会挂载Provider */}
        <Route path="/login" element={<LoginPage/>} />
        <Route path="/*" element={<Navigate replace to='/login'/>} />

        {/* 共享Context的路由组 */}
        <Route element={<PracelContextLayout />}>
          <Route path="/pracels" element={<PracelsPage/>} />
          <Route path="/search" element={<SearchPracelPage/>} />
        </Route>
      </Routes>
    </Layout>
  );
}

export default App;

Context组件本身不需要做任何修改，原有内部的useEffect逻辑保持原样即可，示例参考：

import { createContext, useEffect, useState } from 'react';

export const PracelContext = createContext();

export const PracelContextProvider = ({ children }) => {
  const [pracelList, setPracelList] = useState([]);

  // 这个useEffect只会在Provider首次挂载时执行一次
  useEffect(() => {
    // 原有初始化逻辑，比如拉取数据、绑定全局事件等
    console.log('PracelContext 挂载，执行初始化逻辑');
    return () => {
      // 原有卸载逻辑，比如解绑事件、清空缓存等
      console.log('PracelContext 卸载');
    }
  }, []);

  return (
    <PracelContext.Provider value={{ pracelList, setPracelList }}>
      {children}
    </PracelContext.Provider>
  )
}

• 应用初始加载登录页、或匹配通配规则跳转登录页时：布局路由未被匹配，Provider完全不挂载，不会执行任何Context内部逻辑
• 首次跳转到/pracels或/search任意路由时：布局路由被匹配，Provider首次挂载，内部useEffect执行一次初始化逻辑
• 在/pracels和/search两个路由之间互相切换时：父布局路由保持挂载，Provider实例不销毁重建，useEffect不会重复触发
• 从两个业务路由跳转回登录页或其他非目标路由时：布局路由失配被卸载，Provider同步卸载，下次进入业务路由会重新挂载执行初始化

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