React-router, параметры URL и программное перенаправление

В настоящее время у меня проблемы с использованием React-router v4 с перенаправлением при использовании параметров URL. Вот маршрут, который я использую:

<Route path="/blog/page/:number" component={Blog} />

Я использую структуру пользовательского интерфейса Semantic-ui-react и ее компонент Pagination (https://react.semantic-ui.com/addons/pagination#pagination-example-shorthand), и я не могу отображать его элементы как ссылки или NavLinks из react-router-dom.

Вместо этого я должен использовать функцию события onPageChange(activePage), которая позволяет мне перенаправить на страницу, на которую был сделан щелчок. Я придумал способ сделать это, отрисовав компонент <Redirect to={location} push /> из response-router-dom, и он работает довольно хорошо, за исключением того, что требует управления обновлением компонентов, поскольку он не будет повторно монтировать компонент Blog ...

Моя проблема в том, что я не могу использовать кнопку браузера (хром) для перехода вперед и назад, она просто изменяет URL-адрес и не перемонтирует компонент. Поскольку у меня нет ловушки для управления кнопками «предыдущий» и «следующий» в браузере, мне интересно, как я могу это исправить. Спасибо.


person Who Knows    schedule 13.05.2018    source источник
comment
Добро пожаловать в Stackoverflow. Ваш вопрос не очень ясен. Вам нужна программная маршрутизация или реализация вперед и назад? Пожалуйста, будьте точны.   -  person Gokhan Karadag    schedule 13.05.2018
comment
Спасибо. Собственно этот вопрос не повторяется. Я уже читал этот пост, но не нашел ответа на свой вопрос. Приведенные решения не подходят в моем случае, потому что я использую компонент semantic-ui.   -  person Who Knows    schedule 15.05.2018


Ответы (2)


В response-router есть встроенное управление историей, и вы можете перемещаться с помощью функции push(new_location).

person Mathieu K.    schedule 14.05.2018
comment
Проблема с реактивным маршрутизатором v4 заключается в том, что push-метод не будет работать, если вы используете тот же компонент в своем перенаправлении. Просто потому, что он не будет его отключать и повторно монтировать. Вы должны использовать управление URL-адресами внутри componentDidUpdate или использовать реквизиты forceRefresh в browserRouter. - person Who Knows; 15.05.2018
comment
Да вот что я делаю. componentDidUpdate проверяет, нужно ли изменить состояние. Есть ли причина, по которой вы не можете этого сделать? - person Mathieu K.; 16.05.2018

Я нашел путь. На самом деле, когда вы нажимаете предыдущую и следующую кнопки своего браузера, если вы используете один и тот же компонент, будут запущены методы жизненного цикла componentWillUpdate () и componentDidUpdate (). Я анализирую URL-адрес с помощью this.props.history.location, и теперь я могу убедиться, что компонент будет повторно отображен с правильными данными при нажатии этих кнопок.

person Who Knows    schedule 15.05.2018