React路由跳转子页面时如何触发Header父组件重渲染更新温度数据

方案1：监听路由路径变化（推荐，改动最小） #

你使用了react-router，直接在Header组件中监听路由路径变动即可触发请求，不需要修改其他组件逻辑：

1. 在Header.js中引入useLocation钩子
2. 将当前路径作为useEffect的依赖项，路径变化时自动触发getTemperature

修改后的Header.js核心代码：

import { useLocation } from 'react-router-dom'; // 新增导入

const [temperature, setTemperature] = useState([]);
const location = useLocation(); // 新增获取当前路由信息

const getTemperature= async () => {
  try {
    const response = await fetch('/get-temperature')
    const tempData = await response.json();
    setTemperature(tempData);
  } catch (err) {
    console.error(err.message);
  }
};

// 修改依赖数组，路由路径变化时自动执行
useEffect(() => {
  getTemperature();
}, [location.pathname]); 

如果只需要在/new-user和/view-results两个路径触发，可以加判断逻辑：

useEffect(() => {
  if(['/new-user', '/view-results'].includes(location.pathname)){
    getTemperature();
  }
}, [location.pathname]);

方案2：状态提升+回调触发 #

如果不想和路由逻辑耦合，可以把刷新触发器提升到App组件：

1. App.js中新增一个刷新触发状态，传给Header作为useEffect的依赖
2. 将修改触发状态的方法传给两个子组件，子组件挂载时调用触发刷新

App.js修改代码： #

// 新增状态
const [refreshTempFlag, setRefreshTempFlag] = useState(false);

// 渲染部分修改：把状态传给Header，把修改方法传给两个子组件
return (
    <Router>
      <UserProvider myinfo={myinfo}>
        <Switch>
          <Route path="/">
              <ThemeProvider theme={theme}>
                <div className={classes.root}>
                  <CssBaseline />
                  <nav className={classes.drawer}>
                    <Hidden xsDown implementation="css">
                      <Navigator />
                    </Hidden>
                  </nav>
                  <div className={classes.app}>
                    <Header
                      onDrawerToggle={handleDrawerToggle}
                      refreshTempFlag={refreshTempFlag} // 新增传参
                    />
                    <main className={classes.main}>
                      <Switch>
                        <Route exact path="/new-user"
                          render={(props) => <Content key={props.location.key} setRefreshTempFlag={setRefreshTempFlag} />}
                        />
                        <Route exact path="/view-results"
                          render={(props) => <ViewResults key={props.location.key} setRefreshTempFlag={setRefreshTempFlag} />}
                        />
                      </Switch>
                    </main>
                  </div>
                </div>
              </ThemeProvider>
          </Route>
        </Switch>
      </UserProvider>
    </Router>
);

Header.js修改代码： #

// 接收props里的触发标志
const { refreshTempFlag } = props;

useEffect(() => {
  getTemperature();
}, [refreshTempFlag]); // 依赖改为触发标志

子组件（Content.js/ViewResults.js）新增代码： #

const { setRefreshTempFlag } = props;

// 组件挂载时翻转标志位触发刷新
useEffect(() => {
  setRefreshTempFlag(prev => !prev);
}, []);

方案3：Context共享刷新方法 #

如果后续还有其他组件需要触发温度刷新，可以新建Context来共享刷新方法，避免逐层传props：

1. 新建TemperatureContext.js创建上下文
2. 在App组件中用Provider包裹，把getTemperature方法或者触发标志放到Context里
3. Header和子组件直接消费Context即可调用刷新方法

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