Question

我有一个看起来像这样的路由器

<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更新了网址并导航到了某个东西，但是我没有看到Route＆＃39;但是我没有看到Route＆＃39; ; s history.location得到更新。因为这个（我认为），当我点击页面上的某些链接＆＃39; something.do？phase = something＆＃39;时，只有页面的网址会发生变化，但导航到该新网页并不会发生。

我检查了Programmatically navigate using react router V4和Programmatically navigate using react router，但仍然无法到达任何地方。请帮忙。

Answer 1

之所以发生这种情况，是因为react-router并不直接依赖于window.history，而是使用this history project，其中包含window.history并为react-router提供了监听的可能性位置更新并对它们做出反应。

您必须选择更新操作导航：

使用react-router-redux库。
或者将history道具从Component传递到actions并使用它在其中导航。

第二个选项是react-router doc官方推荐的选项：

您可以将提供的历史记录对象传递给您的操作并在其中导航，而不是分派导航操作。

通过调度redux操作更新路由器的历史记录位置（使用react-router-dom）

1 个答案: