React路由切换时如何重新渲染组件并触发useEffect执行

• React Router v6 匹配到同位置渲染的相同组件时，默认会复用组件实例，不会触发组件的卸载重挂载流程。
• 你在ChartPage中定义的useEffect传入了空依赖数组[]，该配置下副作用逻辑只会在组件首次挂载时执行1次，后续props更新不会触发重跑。

方案1：给useEffect添加正确的依赖项（推荐） #

这是最符合React设计规范的写法，直接把type加入useEffect的依赖数组，当type props随路由变化时，副作用就会自动重新执行。同时建议切换币种时先重置加载状态，避免页面短暂显示旧币种数据。

修改ChartPage.js中的useEffect部分：

useEffect(() => {
  // 切换币种时先重置为加载状态，避免显示旧数据
  setValues(null);
  getCoin(type)
    .then((response) => {
      setValues(response);
    })
    .catch((error) => {
      console.log(error);
    });
  // 将type加入依赖数组
}, [type]);

方案2：给路由元素添加key属性，强制组件重挂载 #

如果需要每次路由切换都完整重挂载ChartPage组件，可以给每个路由上的组件传入唯一的key属性，React识别到key变化时会自动卸载旧组件、挂载新组件，空依赖的useEffect也会随挂载流程重新执行。

修改app.js中的路由配置：

<Routes>
  <Route path="/" exact element={<Home />} />
  <Route path="/show-stocks" element={<ShowStocks />} />
  <Route
    path="show-stocks/bitcoin"
    element={<ChartPage key="btc" type={"BTC"} />}
  />
  <Route
    path="show-stocks/ethereum"
    element={<ChartPage key="eth" type={"ETH"} />}
  />
  <Route
    path="show-stocks/cardano"
    element={<ChartPage key="ada" type={"ADA"} />}
  />
</Routes>

注意：这种写法会丢失组件内部的所有状态，每次切换都会走完整的组件初始化流程，非必要场景优先使用方案1。

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