0

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

<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'，但我没有看到 Route 的 history.location 得到更新。因此（我认为），当我单击页面“something.do?phase=something”上的某个链接时，只有页面的 url 发生变化，但不会导航到该新页面。

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

4

1 回答 1

0

发生这种情况是因为react-router不直接依赖window.history，而是使用这个history项目，它包装window.history并提供react-router了收听位置更新并对其做出反应的可能性。

您必须选择从您的操作中更新导航的选项：

  1. 使用react-router-redux库。
  2. 或者将history道具从您传递Component给您actions并使用它在它们内部导航。

第二种选择是react-routerdoc官方推荐的一种：

您可以传递提供的历史对象来将组件路由到您的操作并在那里导航，而不是调度操作来导航。

于 2017-04-27T09:23:09.313 回答