Маршрутизатор памяти не использует кнопку возврата браузера

Question

Использование реакции-роутера 4.2.2

Следуя документации на https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/api/MemoryRouter.md (которой не хватает хорошего примера)

У меня есть следующее

<MemoryRouter
   initialEntries={[
     '/one',
     '/two'
 ]}>
     <div>
       <Route path="/one" component={FirstPage} />
       <Route path="/two" component={SecondPage} />
     </div>
 </MemoryRouter>

Затем я могу легко использовать следующие элементы для навигации по страницам:

this.props.history.push('/two');

Это работает как задумано. Однако, когда я нажимаю кнопку возврата в браузере, она не возвращает меня к предыдущему маршруту.

Хотя я мог бы легко иметь навигационные кнопки на экране, я бы хотел, чтобы кнопка браузера назад работала. Может ли маршрутизатор памяти сделать это? Если да, то как?

Answer 1

Насколько я понимаю, Memory Router специально ничего не записывает в историю браузера, и поэтому вам придется обрабатывать это вручную. Вы можете добавить прослушиватель событий:

componentDidMount() {
    window.onpopstate = this.handleNavigation.bind(this);
}

handleNavigation(event) {
    if (//event is going back) {
        this.props.history.go(-1); // Or .goBack() if available, or whatever the equivalent is. Possibly will need to keep track of currentLocation in relation to an array and navigate that way.
    } else if (//If event is going forward) {
        this.props.history.go(1); // Or .goForward() if available
    }
}