React Router中ProtectedRoute非匹配时componentDidMount异常触发问题

你的问题根源在于React Router的Switch组件只会识别直接子节点的<Route>或<Redirect>组件，无法处理自定义ProtectedRoute组件内部的路由逻辑。这会导致Switch同时渲染所有ProtectedRoute实例，每个实例里的<Route>会独立判断路径是否匹配——如果多个ProtectedRoute的status符合requiredState，即使路径不匹配当前页面，也可能意外触发组件渲染（虽然理论上<Route>的render回调只有路径匹配时才会执行，但自定义组件的封装方式可能导致逻辑异常）。

解决方案一：修复ProtectedRoute实现，让Switch正确识别路由属性 #

修改ProtectedRoute，确保它返回标准的<Route>组件，这样Switch可以读取它的path属性，只渲染第一个匹配的路由：

class ProtectedRoute extends React.Component {
  examStatusDefaultUrl(status) {
    switch (status) {
      case 'NOT_STARTED': return '/exam/start';
      case 'STARTED': return '/exam/summary';
      default: throw new Error(`Invalid state: '${status}'`)
    }
  }

  render() {
    // 分离路由属性和自定义业务属性
    const { component: Component, status, requiredState, ...routeProps } = this.props;

    return (
      <Route
        {...routeProps}
        render={(props) => {
          // 仅当路由匹配且状态符合要求时，才渲染目标组件
          if (status === requiredState) {
            // 合并路由内置props（如match、location）和自定义业务props
            return <Component {...props} {...this.props} />;
          } else {
            return <Redirect to={this.examStatusDefaultUrl(status)} />;
          }
        }}
      />
    );
  }
}

修改后，Switch会像处理普通<Route>一样处理ProtectedRoute，只会渲染第一个路径匹配的实例，确保只有当前页面对应的组件被挂载，componentDidMount也只会在组件实际渲染时触发。

解决方案二：直接在父组件内联权限判断（更直观） #

如果不想维护自定义组件，可以把权限判断逻辑直接写在<Route>的render回调里，让Switch直接处理所有路由：

首先在父组件中添加状态跳转的辅助函数：

examStatusDefaultUrl(status) {
  const matchedPath = this.props.match.path;
  switch (status) {
    case 'NOT_STARTED': return `${matchedPath}/start`;
    case 'STARTED': return `${matchedPath}/summary`;
    default: throw new Error(`Invalid state: '${status}'`)
  }
}

然后修改路由配置：

const matchedPath = this.props.match.path;
const { status } = this.state.exam;

return (
  <Switch>
    <Route path={`${matchedPath}/start`} render={(props) => {
      return status === 'NOT_STARTED' 
        ? <StartExamPage {...props} /> 
        : <Redirect to={this.examStatusDefaultUrl(status)} />;
    }} />
    <Route path={`${matchedPath}/task/:count`} render={(props) => {
      return status === 'STARTED' 
        ? <ExamPage {...props} /> 
        : <Redirect to={this.examStatusDefaultUrl(status)} />;
    }} />
    <Route path={`${matchedPath}/summary`} render={(props) => {
      return status === 'STARTED' 
        ? <Summary 
            {...props} 
            exam={this.exam.prove} 
            navigateToTask={this.navigateToTask} 
            logAction={this.logAction} 
            handleSubmit={this.handleSubmit} 
          /> 
        : <Redirect to={this.examStatusDefaultUrl(status)} />;
    }} />
  </Switch>
);

这种方式完全依赖Switch的原生逻辑，确保只有第一个匹配的路由会被渲染，彻底避免自定义组件带来的识别问题。

验证效果 #

修改后，当你访问task/:count路径时，Switch只会匹配并渲染对应的<Route>，Summary组件不会被挂载，它的componentDidMount自然也不会被触发；只有当你访问summary路径且status为STARTED时，Summary才会挂载并执行日志记录逻辑。

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