React中使用Switch Route时如何从子组件修改父组件状态？

方法一：通过Props传递状态更新函数 #

这是最直接的方案，适合仅少数子组件需要修改该状态的场景：

1. 在父组件中定义一个专门用于更新loading的函数，避免直接传递setState，逻辑更清晰：

const setLoading = (isLoading) => {
  setState(prev => ({ ...prev, loading: isLoading }));
};

2. 修改Route的渲染方式，把setLoading作为props传给Page1组件：

• 若使用React Router v5：

<Switch>
  <Route 
    exact path='/main/somepage/1/page1' 
    render={(routeProps) => <Page1 {...routeProps} setLoading={setLoading} />} 
  />
  <Route exact path='/main/somepage/2/page2' component={Page2} />
</Switch>

• 若使用React Router v6（注意Switch改为Routes，无需exact属性）：

<Routes>
  <Route 
    path='/main/somepage/1/page1' 
    element={<Page1 setLoading={setLoading} />} 
  />
  <Route path='/main/somepage/2/page2' element={<Page2 />} />
</Routes>

3. 在Page1组件内部调用setLoading修改状态：

// Page1组件示例
const Page1 = (props) => {
  const handleDataFetch = () => {
    // 开始加载
    props.setLoading(true);
    
    // 模拟异步操作（比如接口请求）
    fetch('/api/data')
      .then(res => res.json())
      .then(() => {
        // 操作完成后结束加载
        props.setLoading(false);
      })
      .catch(() => {
        // 操作失败也要重置loading状态
        props.setLoading(false);
      });
  };

  return (
    <div>
      <button onClick={handleDataFetch}>获取数据</button>
    </div>
  );
};

方法二：使用React Context全局管理状态 #

如果多个组件都需要访问或修改这个状态，用Context可以避免多层props传递：

1. 创建全局Context：

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

const AppContext = createContext();

// 定义Context Provider组件
export const AppProvider = ({ children }) => {
  const [state, setState] = useState({
    currentPage: 2,
    currentGroup: "page1",
    currentDate: new Date().toISOString().substring(0,10),
    loading: false,
  });

  const setLoading = (isLoading) => {
    setState(prev => ({ ...prev, loading: isLoading }));
  };

  return (
    <AppContext.Provider value={{ state, setLoading }}>
      {children}
    </AppContext.Provider>
  );
};

// 自定义Hook，简化Context调用
export const useAppContext = () => useContext(AppContext);

2. 在应用顶层（比如App.js）用AppProvider包裹组件：

import { AppProvider } from './AppContext';
import YourParentComponent from './YourParentComponent';

function App() {
  return (
    <AppProvider>
      <YourParentComponent />
    </AppProvider>
  );
}

3. 在Page1组件中通过自定义Hook获取setLoading：

import { useAppContext } from './AppContext';

const Page1 = () => {
  const { setLoading } = useAppContext();

  const handleAction = () => {
    setLoading(true);
    // 模拟异步操作
    setTimeout(() => {
      setLoading(false);
    }, 1500);
  };

  return (
    <div>
      <button onClick={handleAction}>触发加载状态</button>
    </div>
  );
};

export default Page1;

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