React Router同路由不同动态段导航时未重置组件状态问题咨询

React Router 6本身没有专门的配置项自动重置同路由不同参数下的组件状态——这是因为它默认会复用同一路由匹配的组件以优化性能：从React的角度看，组件类型没变，只是props（比如路由参数）变化，所以不会触发组件卸载重建，状态自然会保留。

不过有两种内置的方式可以实现你要的状态重置效果：

1. 给组件添加key属性 #

通过将pageId作为组件的key值，React会在pageId变化时判定这是一个全新的组件实例，从而卸载旧组件、挂载新组件，所有状态都会自动重置。

路由配置中添加key： #

import { Routes, Route, useParams } from 'react-router-dom';

function App() {
  return (
    <Routes>
      <Route 
        path="/page/:pageId" 
        element={<Page key={useParams().pageId} />} 
      />
    </Routes>
  );
}

或者组件内部外层元素加key： #

import { useParams } from 'react-router-dom';
import { useState } from 'react';

function Page() {
  const { pageId } = useParams();
  const [counter, setCounter] = useState(0);

  return (
    <div key={pageId}>
      Counter: {counter}
      <button type="button" onClick={() => setCounter(counter + 1)}>Klik me</button>
    </div>
  );
}

2. 使用useEffect监听pageId变化 #

通过useEffect钩子监听pageId的变化，在参数更新时手动重置状态。这种方式更灵活，适合只需要重置部分状态的场景。

import { useParams } from 'react-router-dom';
import { useState, useEffect } from 'react';

function Page() {
  const { pageId } = useParams();
  const [counter, setCounter] = useState(0);

  useEffect(() => {
    // 当pageId变化时重置计数器
    setCounter(0);
  }, [pageId]); // 依赖项为pageId

  return (
    <div>
      Counter: {counter}
      <button type="button" onClick={() => setCounter(counter + 1)}>Klik me</button>
    </div>
  );
}

如果你的组件状态较多，推荐用key的方式一次性重置所有状态；如果只需要重置部分状态，useEffect的方式更高效。

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