Я создаю клон 'Hacker News', Живой пример с использованием React / Redux и не могу заставить эту последнюю часть функциональности работать,У меня весь App.js
, завернутый в BrowserRouter
, и withRouter
, импортированный в мои компоненты с использованием window.history
.Я помещаю свое состояние в window.history.pushState(getState(), null, `/${getState().searchResponse.params}`)
в моем создателе действия вызова API.console.log(window.history.state)
показывает все состояние моего приложения в консоли, так что оно выдвигается просто отлично.Похоже.В моем главном компоненте, который отображает сообщения, у меня есть
componentDidMount() {
window.onpopstate = function(event) {
window.history.go(event.state);
};
}
....I also tried window.history.back() and that didn't work
, что происходит, когда я нажимаю кнопку «Назад»: панель URL обновляется с правильным предыдущим URL, но через секунду страница перезагружается вURL основного индекса (домашняя страница).Кто-нибудь знает, как это исправить?Я не могу найти какую-либо реальную документацию (или любые другие вопросы, которые являются общими и не специфическими для конкретной проблемы OP), которые имеют какой-либо смысл для React / Redux и где поместить onpopstate
или что делать вместо onpopstate
чтобы это работало правильно.
РЕДАКТИРОВАТЬ: добавлено больше кода ниже
Создатель действий:
export const searchQuery = () => async (dispatch, getState) => {
(...)
if (noquery && sort === "date") {
// DATE WITH NO QUERY
const response = await algoliaSearch.get(
`/search_by_date?tags=story&numericFilters=created_at_i>${filter}&page=${page}`
);
dispatch({ type: "FETCH_POSTS", payload: response.data });
}
(...)
window.history.pushState(
getState(),
null,
`/${getState().searchResponse.params}`
);
console.log(window.history.state);
};
^^^ Это записывает все мои состояния Redux правильно на консоль через window.history.state
, поэтому я предполагаю, что я правильно реализую window.history.pushState()
.
Компонент PostList:
class PostList extends React.Component {
componentDidMount() {
window.onpopstate = () => {
window.history.back();
};
}
(...)
}
Я пыталсяизменение window.history.back()
на this.props.history.goBack()
и не работает.Имеет ли смысл мой код?Я в корне неверно понимаю API истории?