React Router v6嵌套路由Redux Store上下文丢失问题修复

不需要把Catalogue组件内的useEffect数据请求、状态定义、上下文封装等逻辑全部迁移到App.js，只需要调整路由结构适配React Router v6的嵌套路由规则即可解决问题。

报错核心是v5和v6的路由渲染逻辑差异：

• v5版本中，Catalogue组件内部嵌套<BrowserRouter>管理子路由，所有/catalogue路径下的子组件都是Catalogue的子节点，可正常访问组件内部封装的Redux store、自定义上下文。
• v6版本中，<Routes>的直接子元素仅支持<Route>或<React.Fragment>，这也是直接在<Routes>内放置<Provider>会抛出错误的原因。如果仅将Catalogue绑定到/catalogue的索引路由，访问/catalogue/posts、/catalogue/people等子路径时，Catalogue组件本身不会被渲染，其内部挂载的所有上下文Provider、公共布局都不会生效，被connect包裹的子组件找不到Redux store上下文自然会抛出异常。

1. 调整全局路由配置 #

移除Catalogue组件内部嵌套的<BrowserRouter>，整个应用仅在最外层（通常是index.js入口文件）保留一个<BrowserRouter>包裹根组件。将/catalogue路径下的所有子路由作为Catalogue对应路由的子节点配置，Catalogue不再绑定索引路由，而是作为/catalogue路径的父路由组件：

// App.js
import { Routes, Route } from 'react-router-dom';
import Catalogue from './Catalogue';
import CatalogueHome from './CatalogueHome';
import PostDetail from './PostDetail';
import PeopleList from './PeopleList';
// 其他业务组件导入

function App() {
  return (
    <Routes>
      {/* 其他根级路由，比如登录页、首页等 */}
      <Route path="/catalogue" element={<Catalogue />}>
        {/* 索引路由，匹配/catalogue路径，渲染原有首页内容 */}
        <Route index element={<CatalogueHome />} />
        {/* 原有/catalogue下的子路由全部放在这里 */}
        <Route path="posts/:postId" element={<PostDetail />} />
        <Route path="people" element={<PeopleList />} />
        {/* 其余子路由按相同规则配置 */}
      </Route>
    </Routes>
  )
}

export default App;

2. 改造Catalogue组件 #

保留Catalogue内部所有原有逻辑（Redux store创建、自定义上下文、公共布局、初始化数据请求），仅将原来渲染子路由的位置替换为v6提供的<Outlet />组件，子路由匹配到的内容会自动渲染到Outlet所在位置：

// Catalogue.js
import { Outlet } from 'react-router-dom';
import { Provider } from 'react-redux';
import { createCatalogueStore } from './catalogue-store'; // 原有catalogue专属store创建逻辑
import { CatalogueContext } from './catalogue-context'; // 原有自定义上下文
import SideBar from './SideBar';
import CatalogueHeader from './CatalogueHeader';
import FooterBar from './FooterBar';
import { useEffect, useMemo, useState } from 'react';
import { fetchChapters, fetchPeople, fetchPosts } from './api';

function Catalogue() {
  // 原有逻辑全部保留，无需迁移
  const store = useMemo(() => createCatalogueStore(), []);
  const [chapters, setChapters] = useState([]);
  const [people, setPeople] = useState([]);
  const [posts, setPosts] = useState([]);

  useEffect(() => {
    // 原有目录数据初始化请求逻辑不动
    Promise.all([fetchChapters(), fetchPeople(), fetchPosts()])
      .then(([chapterRes, peopleRes, postsRes]) => {
        setChapters(chapterRes);
        setPeople(peopleRes);
        setPosts(postsRes);
      })
  }, []);

  const contextValue = useMemo(() => ({ chapters, people, posts }), [chapters, people, posts]);

  return (
    <Provider store={store}>
      <CatalogueContext.Provider value={contextValue}>
        <div className="catalogue-container">
          <SideBar />
          <div className="catalogue-main-area">
            <CatalogueHeader />
            <div className="catalogue-content">
              {/* 子路由内容渲染出口 */}
              <Outlet />
            </div>
            <FooterBar />
          </div>
        </div>
      </CatalogueContext.Provider>
    </Provider>
  )
}

export default Catalogue;

• 不要在<Routes>的直接子节点放置Provider、布局组件这类非路由组件，这类包裹逻辑需要放到对应父路由的element指向的组件中，通过Outlet承接子路由内容。
• 改造后所有/catalogue路径下的子路由都会被Catalogue组件包裹，公共布局、上下文、store都可以正常访问，和v5版本的表现完全一致。

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