У меня есть родительский компонент, где у меня есть маршрутизатор с маршрутами. Каждый маршрут оборачивается компонентом 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
вызывался только тогда, когда компонент фактически смонтирован и отрендерен?