如何创建React组件Context？能否用Context实现无路由页面切换？

完全可行，不需要依赖路由库，仅用React Context就能实现这种组件组切换的需求。核心思路是通过Context管理当前激活的组件组标识，主页面根据这个状态渲染对应组的4个组件，点击切换按钮时更新Context内的状态即可。

实现步骤与代码示例： #

1. 创建Context与状态管理逻辑
   先定义Context来存储组件组状态和切换方法，用自定义Provider封装状态：

   import { createContext, useContext, useState, ReactNode } from 'react';
   
   // 定义Context的类型约束
   interface ComponentGroupContextType {
     activeGroup: 'group1' | 'group2';
     switchGroup: (group: 'group1' | 'group2') => void;
   }
   
   // 创建Context，设置默认值
   const ComponentGroupContext = createContext<ComponentGroupContextType>({
     activeGroup: 'group1',
     switchGroup: () => {}
   });
   
   // 自定义Provider组件，包裹需要共享状态的子组件
   export const ComponentGroupProvider = ({ children }: { children: ReactNode }) => {
     const [activeGroup, setActiveGroup] = useState<'group1' | 'group2'>('group1');
   
     // 切换组件组的方法
     const switchGroup = (group: 'group1' | 'group2') => {
       setActiveGroup(group);
     };
   
     return (
       <ComponentGroupContext.Provider value={{ activeGroup, switchGroup }}>
         {children}
       </ComponentGroupContext.Provider>
     );
   };
   
   // 自定义Hook，简化组件获取Context的操作
   export const useComponentGroup = () => useContext(ComponentGroupContext);
   

2. 定义两组页面组件
   准备好需要切换的两组组件：

   // 第一组组件
   const Page1A = () => <div>页面1A</div>;
   const Page1B = () => <div>页面1B</div>;
   const Page1C = () => <div>页面1C</div>;
   const Page1D = () => <div>页面1D</div>;
   
   // 第二组组件
   const Page2A = () => <div>页面2A</div>;
   const Page2B = () => <div>页面2B</div>;
   const Page2C = () => <div>页面2C</div>;
   const Page2D = () => <div>页面2D</div>;
   

3. 主页面实现切换与渲染逻辑
   在主页面中使用自定义Hook获取状态和切换方法，根据当前激活组渲染对应组件：

   import { useComponentGroup } from './ComponentGroupContext';
   
   const MainPage = () => {
     const { activeGroup, switchGroup } = useComponentGroup();
   
     // 根据当前组选择要渲染的组件列表
     const currentComponents = activeGroup === 'group1' 
       ? [Page1A, Page1B, Page1C, Page1D]
       : [Page2A, Page2B, Page2C, Page2D];
   
     return (
       <div>
         {/* 切换按钮 */}
         <div className="switch-buttons">
           <button onClick={() => switchGroup('group1')}>切换到组1</button>
           <button onClick={() => switchGroup('group2')}>切换到组2</button>
         </div>
         {/* 渲染当前组的4个页面组件 */}
         <div className="pages-container">
           {currentComponents.map((PageComp, idx) => (
             <PageComp key={idx} />
           ))}
         </div>
       </div>
     );
   };
   
   export default MainPage;
   

4. 在根组件中注入Provider
   最后在根组件用ComponentGroupProvider包裹主页面，让状态能在组件树中共享：

   import { ComponentGroupProvider } from './ComponentGroupContext';
   import MainPage from './MainPage';
   
   const App = () => {
     return (
       <ComponentGroupProvider>
         <MainPage />
       </ComponentGroupProvider>
     );
   };
   
   export default App;
   

这种方案完全不需要路由，所有状态由Context统一管理，切换时仅更新状态并触发对应组件组的重新渲染，完全符合你的需求。你可以根据实际场景扩展组件组数量，或者调整组件的布局方式。

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