React Router集成时跨组件mode状态管理的重构方案咨询

针对你的问题，核心是要让路由嵌套结构中的父组件（Root）、子路由组件（Home/About）共享状态，这里提供两种简洁的实现方案，按需选择：

方案一：利用React Router Outlet上下文（轻量推荐） #

这种方式不需要额外创建全局上下文，完全适配当前路由嵌套结构，适合状态仅在路由组件树内共享的场景。

1. 重构Root.js：将状态移至Root组件 #

Root作为所有子路由的父容器，Navbar和Outlet都在这里渲染，把状态定义在这里最合理：

import { useState } from 'react';
import { Outlet } from 'react-router-dom';
import Navbar from './Navbar';

const Root = () => {
  // 修复原代码中setMode重名问题，改名为toggleMode
  const [mode, setMode] = useState("Light");
  
  const toggleMode = () => {
    // 写入你的主题切换逻辑，比如：
    setMode(prev => prev === "Light" ? "Dark" : "Light");
  };
  
  const handleFire = () => {
    // 写入你的handleFire逻辑
  };

  // 通过Outlet的context属性传递状态与方法给子路由
  return (
    <>
      <Navbar mode={mode} handleFire={handleFire} toggleMode={toggleMode} />
      <Outlet context={{ mode, toggleMode, handleFire }} />
    </>
  );
};

export default Root;

2. 简化App.js的路由配置 #

子路由组件不再需要手动传递props，直接通过Outlet上下文获取：

import { createBrowserRouter, RouterProvider } from 'react-router-dom';
import Root from './Root';
import Home from './Home';
import About from './About';

const router = createBrowserRouter([
  {
    path: "/",
    element: <Root />,
    children: [
      { path: "/home", element: <Home /> },
      { path: "/about", element: <About /> }
    ]
  }    
]);

const App = () => {
  return <RouterProvider router={router} />;
};

export default App;

3. 子路由组件获取状态（Home/About示例） #

使用useOutletContext钩子读取Root传递的上下文：

// Home.js示例
import { useOutletContext } from 'react-router-dom';

const Home = () => {
  const { mode } = useOutletContext();
  
  return (
    <div className={`home-page ${mode}`}>
      <h1>Home Page ({mode} Mode)</h1>
    </div>
  );
};

export default Home;

方案二：全局Context管理（适合多组件共享场景） #

如果之后状态需要在非路由组件中也能访问，推荐使用React Context做全局状态管理：

1. 创建ThemeContext.js #

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

// 创建上下文
const ThemeContext = createContext();

// 封装Provider组件
export const ThemeProvider = ({ children }) => {
  const [mode, setMode] = useState("Light");
  
  const toggleMode = () => {
    setMode(prev => prev === "Light" ? "Dark" : "Light");
  };
  
  const handleFire = () => {
    // 写入你的handleFire逻辑
  };

  return (
    <ThemeContext.Provider value={{ mode, toggleMode, handleFire }}>
      {children}
    </ThemeContext.Provider>
  );
};

// 封装自定义钩子，简化上下文调用
export const useTheme = () => useContext(ThemeContext);

2. App.js中包裹全局Provider #

import { createBrowserRouter, RouterProvider } from 'react-router-dom';
import { ThemeProvider } from './ThemeContext';
import Root from './Root';
import Home from './Home';
import About from './About';

const router = createBrowserRouter([
  {
    path: "/",
    element: <Root />,
    children: [
      { path: "/home", element: <Home /> },
      { path: "/about", element: <About /> }
    ]
  }    
]);

const App = () => {
  return (
    <ThemeProvider>
      <RouterProvider router={router} />
    </ThemeProvider>
  );
};

export default App;

3. 任意组件中获取状态 #

Root.js、Home、About甚至Navbar都可以通过useTheme()钩子直接获取：

// Root.js示例
import { Outlet } from 'react-router-dom';
import { useTheme } from './ThemeContext';
import Navbar from './Navbar';

const Root = () => {
  const { mode, handleFire, toggleMode } = useTheme();

  return (
    <>
      <Navbar mode={mode} handleFire={handleFire} toggleMode={toggleMode} />
      <Outlet />
    </>
  );
};

export default Root;

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