обновление истории местоположения маршрутизатора путем отправки действия redux (с помощью response-router-dom)

У меня есть роутер, который выглядит примерно так

<Router>
       <Switch>
             <Route path="abc.do" render={() => <SetupAppInitialLoad pageKey="abc" />} />
              <Route path="xyz.do" render={() => <SetupAppInitialLoad pageKey="xyz" />} />
       </Switch>
</Router>

У меня много Route таких внутри <Switch>. Я использую redux для обработки состояния и отправки асинхронных действий из некоторых компонентов, когда пользователь нажимает кнопку / ссылку.

export const asyncExampleAction = () => {
    return (dispatch, getState) => {
        //logic to send inputs to server comes here
        .then(checkStatus)
        .then(parseJSON)
        .then( (data) => {
            if (success case) {
                history.push(`something.do?phase=something`);
            } else {
                //handle error logic
            }
        })
        .catch( (error) => {
            console.log(error);

        });
    }
}

Теперь проблема, с которой я столкнулся, заключается в том, что несмотря на то, что history.push обновляет URL-адрес и направляет меня к «something.do?phase=something», я не вижу, как обновляется история маршрута. Из-за этого (я думаю), когда я нажимаю на какую-то ссылку на странице something.do?phase=something, изменяется только URL-адрес страницы, но переход на эту новую страницу не происходит.

Я проверил Программную навигацию с использованием реагирующего маршрутизатора V4 и Программная навигация с использованием реагирующего маршрутизатора, но все равно никуда не денешься. Пожалуйста помоги.


redux react-router-dom
person abhi    schedule 26.04.2017    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Это происходит потому, что react-router не зависит напрямую от window.history, а вместо этого использует этот history проект, который является оболочкой window.history и предоставляет react-router возможность прослушивать обновления местоположения и реагировать на них.

У вас есть параметры для обновления навигации по вашим действиям:

  1. Используйте библиотеку response-router-redux.
  2. Или передайте history опору из своего Component в свой actions и используйте его для навигации внутри них.

Второй вариант официально рекомендован react-router doc :

Вместо того, чтобы отправлять действия для навигации, вы можете передать объект истории, предоставленный для маршрутизации компонентов к вашим действиям и перемещаться с ним там.

person fkulikov    schedule 27.04.2017
comment
как сделать историческую опору доступной для моего компонента. Когда я отлаживаю свой компонент с помощью инструмента react dev, я не вижу истории в списке его свойств. Можете ли вы указать мне на какой-нибудь рабочий пример, в котором был реализован этот подход? - person abhi; 27.04.2017