Вызывается React Router, даже если путь не совпадает с маршрутом - PullRequest
1 голос
/ 09 марта 2020

У меня есть родительский компонент, где у меня есть маршрутизатор с маршрутами. Каждый маршрут оборачивается компонентом ProtectedRoute, который проверяет, должен ли компонент отображаться или нет.

       const matchedPath = this.props.match.path;
       return (
       <Switch>
          <ProtectedRoute
            path={`${matchedPath}/start`}
            status={this.state.exam.status}
            requiredState="NOT_STARTED"
            component={StartExamPage}
          />
          <ProtectedRoute
            path={`${matchedPath}/task/:count`}
            status={this.state.exam.status}
            requiredState="STARTED"
            component={ExamPage}
          />
          <ProtectedRoute
            path={`${matchedPath}/summary`}
            status={this.state.exam.status}
            requiredState="STARTED"
            component={Summary}
            exam={this.exam.prove}
            navigateToTask={this.navigateToTask}
            logAction={this.logAction}
            handleSubmit={this.handleSubmit}
          />
     </Switch>)

Компонент ProtectedRoute выглядит следующим образом:

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, ...componentProps } = this.props;
    return (
      <Route
        {...componentProps}
        render={props => {
          return (
            componentProps.status === componentProps.requiredState ?
            <Component {...componentProps} {...props}/> :
            <Redirect to={this.examStatusDefaultUrl(componentProps.status)}/>
        )}}
      />
    )
  }
}

export default ProtectedRoute;

Поскольку я хочу регистрироваться при открытии каждой страницы, я вызываю функцию logAction из componentDidUpdate в компоненте Summary:

componentDidMount() {
    this.mounted = true;
    console.log('summary ', this.props);
    this.props.logAction({action: actions.SUMMARY_OPENED});
}

У меня проблема в том, что Summary's componentDidMount вызывается, даже если компонент не смонтирован. Вызывается, когда отображается маршрут task/:count. Они имеют то же значение status, которое я проверяю, чтобы определить, будет ли компонент отображаться или нет в компоненте ProtectedRoute. Итак, мне интересно, если это проблема и как я могу ее решить, чтобы componentDidMount вызывался только тогда, когда компонент фактически смонтирован и отрендерен?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...