React-Router路由参数变化时组件未卸载问题求助

哥们儿我太懂你这种被逼疯的感觉了！我当初第一次用React Router的动态路由时也踩过这个一模一样的坑😅。问题出在React Router的一个性能优化上：当路由参数变化但组件类型不变时，它会复用已经挂载的组件，而不是卸载再重新挂载，所以componentDidMount只会在第一次加载时执行一次，后续参数变化就不会触发了。

下面给你几个靠谱的解决方案，按需选就行：

方案1：在类组件中使用componentDidUpdate监听参数变化 #

既然componentDidMount只执行一次，那我们可以在组件更新时检查路由参数有没有变化，如果变了就重新请求数据。

class Page extends React.Component {
  componentDidMount() {
    this.fetchPageData(this.props.match.params.pageId);
  }

  componentDidUpdate(prevProps) {
    // 对比前后的pageId，如果不一样就重新请求
    if (prevProps.match.params.pageId !== this.props.match.params.pageId) {
      this.fetchPageData(this.props.match.params.pageId);
    }
  }

  fetchPageData = (pageId) => {
    // 这里写你的数据请求逻辑
    console.log(`请求页面${pageId}的数据`);
    // 比如 axios.get(`/api/pages/${pageId}`).then(...);
  };

  render() {
    return <div>当前页面ID：{this.props.match.params.pageId}</div>;
  }
}

这个方案的好处是不会破坏组件的复用性，只是在参数变化时触发新请求，性能友好。

方案2：函数组件用useParams + useEffect监听参数 #

如果你已经转向函数组件开发，这个方案更简洁：用React Router提供的useParams钩子拿到动态参数，然后用useEffect监听参数变化，触发请求。

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

function Page() {
  const { pageId } = useParams();

  useEffect(() => {
    // pageId变化时执行这个回调
    const fetchPageData = async () => {
      console.log(`请求页面${pageId}的数据`);
      // 你的请求逻辑：const res = await fetch(`/api/pages/${pageId}`);
    };

    fetchPageData();
  }, [pageId]); // 依赖数组里放pageId，只有它变了才重新执行

  return <div>当前页面ID：{pageId}</div>;
}

这个是现在React生态的主流写法，代码更简洁，逻辑也清晰。

方案3：给Route加key属性强制组件重新挂载 #

如果不想改组件内部逻辑，也可以直接在Route上添加key属性，让React认为这是一个新组件，从而卸载旧组件重新挂载，这样componentDidMount就会再次执行。

<Router>
  {/* 用当前路由的完整路径作为key，参数变化时key就会变 */}
  <Route path="/pages/:pageId" component={Page} key={window.location.pathname} />
</Router>

或者用路由的match.url作为key（如果是在路由组件外的话可能需要用useRouteMatch拿到）：

import { useRouteMatch } from 'react-router-dom';

// 在父组件里
function App() {
  const match = useRouteMatch("/pages/:pageId");
  return (
    <Router>
      <Route path="/pages/:pageId" component={Page} key={match?.url} />
    </Router>
  );
}

这个方案简单粗暴，但要注意：组件重新挂载会丢失之前的状态（比如表单输入内容），如果你的组件有需要保留的状态，这个方案就不太合适。

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