React Route未捕获URL变化：重定向后组件未重新挂载求助

这个问题我之前也碰到过，核心原因是React Router的组件复用机制——当路由参数变化但组件类型相同时，它不会销毁再重建组件，而是复用现有实例，所以你的componentWillMount只会在第一次挂载时执行，后续参数变化根本不会触发这个钩子，自然也就不会再执行重定向逻辑了。

下面给你几个可行的解决思路：

1. 在组件更新生命周期中监听参数变化 #

既然组件不会重新挂载，那我们就把重定向逻辑放到更新阶段的钩子中，比如componentDidUpdate，对比前后的参数差异来触发重定向：

componentDidUpdate(prevProps) {
  // 获取当前和之前的路由参数
  const currentParam = this.props.match.params.param;
  const prevParam = prevProps.match.params.param;

  // 只有当参数变化且当前参数不是目标值时，才执行重定向
  if (currentParam !== prevParam && currentParam !== 'desired_one') {
    this.props.history.push('/route/desired_one');
  }
}

注意：一定要加上currentParam !== prevParam的判断，否则重定向后参数变化会再次触发componentDidUpdate，导致无限循环。

另外提一句：componentWillMount已经被React官方废弃了，建议用componentDidMount处理初始化逻辑，不过这里的问题根源不在这个钩子本身。

2. 把重定向逻辑移到路由层面（推荐） #

更优雅的方式是把路由跳转的逻辑从组件中抽离，交给React Router的Redirect组件处理，这样组件不需要关心路由规则，职责更单一：

import { Switch, Route, Redirect } from 'react-router-dom';

// 路由配置部分
<Switch>
  {/* 先匹配目标路由，渲染组件 */}
  <Route exact path="/route/desired_one" component={DealContainer} />
  {/* 其他所有/route/:param的路由都重定向到目标地址 */}
  <Redirect from="/route/:param" to="/route/desired_one" />
</Switch>

Switch组件会按顺序匹配第一个符合条件的路由，所以一定要把精确匹配的目标路由放在前面，这样只有当参数是desired_one时才会渲染DealContainer，其他情况直接重定向，从根源上避免了组件复用带来的问题。

3. 函数组件的处理方式（如果后续重构） #

如果之后你把类组件改成函数组件，可以用useParams和useEffect来监听参数变化：

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

function DealContainer() {
  const { param } = useParams();
  const history = useHistory();

  useEffect(() => {
    if (param !== 'desired_one') {
      history.push('/route/desired_one');
    }
  }, [param, history]); // 依赖参数和history，参数变化时触发

  // 组件内容
  return <div>...</div>;
}

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