Mobx-реагирующий наблюдатель не синхронизируется с представлением React Router

Question

Я смог успешно использовать mobx с моими обычными страницами, но у меня была эта сложная страница, которую я хотел создать, поэтому я решил встроить ее в компонентный рендер, который отлично работал.

render = () => (
  <InAppLayout fullWidth noPageTitle role={Constants.userRoles.hospital}>
    <SplitView list={this._renderList()}
      headerList={this._renderDoctorMenu()}
      headerSlotContent={this._renderHeader()}
      loading={HospitalStore.doctorsLoading}>
        <Switch>

          <Route exact path={`${this.state.pageBaseLink}`} 
                render={()=><div className="no-result">
                              <h1>No Doctor has been selected</h1>
                            </div>} 
          />

          <Route path={`${this.state.pageBaseLink}create_new`} 
            component={()=> <AddDoctor /> } 
          />

          <Route path={`${this.state.pageBaseLink}:id/schedule`} 
            component={()=> <DoctorSchedule /> 
          }/>

          <Route path={`${this.state.pageBaseLink}:id`} 
            component={({match})=><DoctorCalendar />} 
          />

          </Switch>
    </SplitView>
  </InAppLayout>
)

Я использую приложение Create Reaction, поэтому я использую своих наблюдателей.

const Doctors = observer(
  class Doctors extends HospitalBase {

Это хорошо сработало для моих предыдущих страниц, но в данном конкретном случае это не работает, и я не знаю почему. Это работает, когда я перехожу на страницу с другой, но когда я захожу на страницу по ссылке или обновляю страницу, наблюдатель перестает работать, и мои данные не синхронизируются.