При использовании HashRouter в ReactJS this.props.location.state не определяется при обновлении страницы

Question

У меня есть страница со списком пива, затем при щелчке любого элемента открывается страница с подробностями.

Страница с данными в деталях передается через

<Link to=“{pathname:’beerDetails’,state:{selectedbeer:selectedbeer}}/>

На странице сведений

this.props.location.state не определяется при обновлении страницы сведений

При использовании HashRouter в ReactJS this.props.location.state не определено при обновлении страницы, но при обновлении страницы данные сохраняются при использовании browserRouter

Answer 1

В вашем примере кода есть открытая двойная кавычка для компонента Link.

Что касается использования HashRouter и location.state, в документации говорится следующее:

Хэш-история не поддерживает location.key или location.state. В В предыдущих версиях мы пытались подобрать поведение, но были крайние случаи, которые мы не могли решить. Любой код или плагин, который нуждается в этом поведение не сработает. Поскольку эта техника предназначена только для поддержки старые браузеры, мы рекомендуем вам настроить ваш сервер для работы с вместо.

https://reacttraining.com/react-router/web/api/HashRouter

Как вы упомянули, он работает с BrowserRouter. Если у вас нет особой необходимости поддерживать старые браузеры, вам следует использовать BrowserRouter, который использует API истории HTML5.