Хорошо, взяв следующий компонент:
export const OrganizationEventSelector =
inject('organizationStore', 'routingStore')(observer(class EventSelector extends Component {
constructor(props) {
super(props);
}
gotoPreviousTab = () => {
const {routingStore} = this.props;
routingStore.goBack();
};
render() {
const {classes, onEnrollEvents, match} = this.props;
console.log(match.params[0]);
const remainingPath = match.params[0] || "";
const idx = remainingPath ? 1 : 0;
return (<>
<div>
<Toolbar disableGutters={true}>
{idx > 0 &&
<div>
<IconButton onClick={this.gotoPreviousTab}>
<ChevronLeftIcon />
</IconButton>
</div>
}
<Typography >
{idx === 0 ? "Organizations" : "Details"}
</Typography>
</Toolbar>
</div>
</>);
}
}));
Этот компонент живет по маршруту:
<Switch>
<Route path={['/', '/home']} exact component={HomeView}/>
<Route path={['/organizations']} exact component={OrganizationEventSelector}/>
<Route path={['/organizations/*']} component={OrganizationEventSelector}/>
</Switch>
Теперь при переходе по URL-адресу SITE/organizations
он правильно отображает «Организации»заглавие.И если я перехожу на следующую страницу (кнопка, которая находится в другом компоненте), URL становится SITE/organizations/org-0
, и он правильно отображает «значок назад» и «Детали».
Однако, если я затем нажимаю наIconButton
URL обновляется (до SITE/organizations
), и добавление точек останова / журналов консоли показывает, что вызывается функция рендеринга.
Однако во время рендеринга match.params [0]= org-0
.Как будто URL-адрес не обновился, еще хуже: match.url на самом деле все еще SITE/organizations/org-0
.
Так почему же это происходит?И как сделать так, чтобы мои компоненты обновлялись после обновления URL (или сообщали им новый URL).
РЕДАКТИРОВАТЬ: я заметил, что сайт работает в Firefox.Это «просто» в Chrome, что он не работает.