React中Link传递的主题状态变量无法实时更新问题求助

你遇到的核心问题是：通过Link的state传递的参数仅在路由跳转时生效一次。当App组件中的theme状态更新时，已经挂载在路由中的AboutMe组件不会自动获取到新的theme值——因为location.state不会随着上游状态的变化而同步更新，只有重新通过Link跳转或者刷新页面时，才会重新读取这个值。

下面是几种可行的解决方式，按推荐程度排序：

方案一：使用React Context共享全局主题状态（最推荐） #

通过Context把theme状态提升为全局可访问的状态，让所有需要的组件直接订阅这个状态，这样状态更新时所有依赖组件都会实时刷新。

1. 创建ThemeContext #

// ThemeContext.js
import { createContext, useContext } from 'react';

const ThemeContext = createContext();

export function ThemeProvider({ children, theme, setTheme }) {
  return (
    <ThemeContext.Provider value={{ theme, setTheme }}>
      {children}
    </ThemeContext.Provider>
  );
}

export function useTheme() {
  return useContext(ThemeContext);
}

2. 在App组件中包裹Provider #

// App.js
import { useState } from 'react';
import { ThemeProvider } from './ThemeContext';
import Topbar from './Topbar';
import ToggleButton from './ToggleButton';

function App() {
  const [theme, setTheme] = useState('dark');

  return (
    <ThemeProvider theme={theme} setTheme={setTheme}>
      <Topbar />
      <ToggleButton variant='light' onClick={() => setTheme('light')}>Light</ToggleButton>
      <ToggleButton variant='dark' onClick={() => setTheme('dark')}>Dark</ToggleButton>
      {/* 这里放置你的路由组件，比如 <Routes>...</Routes> */}
    </ThemeProvider>
  );
}

3. 修改Topbar组件，从Context获取theme #

// Topbar.js
import { useTheme } from './ThemeContext';
import { Link } from 'react-router-dom';

export default function Topbar() {
  const { theme } = useTheme();
  
  console.log('Topbar', theme);
  
  return (
    <div>
      {/* 无需再通过Link传递state，AboutMe会直接从Context读取theme */}
      <Link to="/about-me">About Me</Link>
    </div>
  );
}

4. 修改AboutMe组件，从Context获取theme #

// AboutMe.js
import { useTheme } from './ThemeContext';
import { useEffect } from 'react';

export default function AboutMe() {
  const { theme } = useTheme();

  useEffect(() => {
    console.log('About-Me', theme);
    // 在这里根据theme修改字体样式，示例：
    document.body.style.color = theme === 'dark' ? '#fff' : '#000';
  }, [theme]);

  return <div>About Me Page</div>;
}

方案二：通过路由参数传递主题（适合简单场景） #

如果不想用Context，可以把theme作为路由查询参数传递，让AboutMe组件实时监听路由参数的变化。

1. 修改App组件，更新theme时同步更新路由参数 #

// App.js
import { useState, useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
import Topbar from './Topbar';
import ToggleButton from './ToggleButton';

function App() {
  const [theme, setTheme] = useState('dark');
  const navigate = useNavigate();

  // theme变化时，更新当前路由的查询参数
  useEffect(() => {
    const currentPath = window.location.pathname;
    navigate(`${currentPath}?theme=${theme}`, { replace: true });
  }, [theme, navigate]);

  return (
    <>
      <Topbar theme={theme} />
      <ToggleButton variant='light' onClick={() => setTheme('light')}>Light</ToggleButton>
      <ToggleButton variant='dark' onClick={() => setTheme('dark')}>Dark</ToggleButton>
    </>
  );
}

2. 修改AboutMe组件，通过useSearchParams获取theme #

// AboutMe.js
import { useSearchParams, useEffect } from 'react-router-dom';

export default function AboutMe() {
  const [searchParams] = useSearchParams();
  
  useEffect(() => {
    const theme = searchParams.get('theme') || 'dark';
    console.log('About-Me', theme);
    // 应用样式逻辑
  }, [searchParams]);

  return <div>About Me Page</div>;
}

方案三：使用全局状态管理库（如Redux，适合大型应用） #

如果你的应用复杂、有多个全局状态需要管理，可以用Redux这类库，把theme放到store中，组件通过useSelector获取状态，通过useDispatch更新状态。

示例代码（简化版） #

// store.js
import { configureStore, createSlice } from '@reduxjs/toolkit';

const themeSlice = createSlice({
  name: 'theme',
  initialState: 'dark',
  reducers: {
    setTheme: (state, action) => action.payload
  }
});

export const { setTheme } = themeSlice.actions;
export const store = configureStore({
  reducer: {
    theme: themeSlice.reducer
  }
});

// App.js
import { useDispatch, useSelector } from 'react-redux';
import { setTheme } from './store';
import Topbar from './Topbar';
import ToggleButton from './ToggleButton';

function App() {
  const theme = useSelector(state => state.theme);
  const dispatch = useDispatch();

  return (
    <>
      <Topbar />
      <ToggleButton variant='light' onClick={() => dispatch(setTheme('light'))}>Light</ToggleButton>
      <ToggleButton variant='dark' onClick={() => dispatch(setTheme('dark'))}>Dark</ToggleButton>
    </>
  );
}

// AboutMe.js
import { useSelector, useEffect } from 'react-redux';

export default function AboutMe() {
  const theme = useSelector(state => state.theme);

  useEffect(() => {
    console.log('About-Me', theme);
    // 应用样式
  }, [theme]);

  return <div>About Me Page</div>;
}

• 方案一（Context）是React官方推荐的全局状态共享方案，适合大多数中小型应用，无需额外依赖。
• 方案二（路由参数）适合不需要全局共享、仅在路由间传递简单状态的场景，但参数会暴露在URL中。
• 方案三（Redux）适合大型应用，当有多个全局状态需要统一管理时使用。

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