Реактивный компонент не меняет состояние, когда реагирующий маршрутизатор перемонтирует его

Question

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

ReactDOM.render(
        <Provider store={store}>
                <Router>
                        <div>
                                <Route exact path="/" component={ListPage}/>
                                <Route path="/edit/:itemId" component={ItemPage}/>
                        </div>
                </Router>
        </Provider>,
        document.getElementById('root')
);

Итак - когда я открываю страницу редактирования - компонент рендерится и при монтировании я извлекаю данные для этого элемента. Я устанавливаю его в состоянии, поэтому компонент рендерится.

Затем - я возвращаюсь на страницу листинга и открываю страницу редактирования для другого элемента - и когда страница редактирования снова монтируется - она ​​имеет то же состояние, что и раньше.

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

(На данный момент я работаю над этим с восстановлением состояния на componentDidMount(), но для меня это выглядит некрасивым решением.)

Answer 1

Это должно исправить вашу проблему.

ReactDOM.render(
      <Provider store={store}>
        <Router>
          <Switch>
            <Route exact path="/" component={ListPage}/>
            <Route path="/edit/:itemId" component={ItemPage}/>
          </Switch>
        </Router>
      </Provider>,
   document.getElementById('root')
);