更新路由器&x27;通过调度redux操作(使用react-router-dom)设置历史位置

更新路由器&x27;通过调度redux操作(使用react-router-dom)设置历史位置,redux,react-router-dom,Redux,React Router Dom,我有一个类似这样的路由器 <Router> <Switch> <Route path="abc.do" render={() => <SetupAppInitialLoad pageKey="abc" />} /> <Route path="xyz.do" render={() => <SetupAppInitialLoad pageKey="xyz" /&

我有一个类似这样的路由器

<Router>
       <Switch>
             <Route path="abc.do" render={() => <SetupAppInitialLoad pageKey="abc" />} />
              <Route path="xyz.do" render={() => <SetupAppInitialLoad pageKey="xyz" />} />
       </Switch>
</Router>
现在,我面临的问题是,尽管history.push更新了url并将我导航到“something.do?phase=something”,但我没有看到路由的history.location得到更新。正因为如此(我想),当我点击“something.do?phase=something”页面上的某个链接时,只有页面的url发生了变化,但没有导航到新页面


我检查了一下,但还是没有结果。请提供帮助。

之所以会发生这种情况,是因为
react router
不直接依赖于
窗口。history
,而是使用,它包装
窗口。history
,并为
react router
提供监听位置更新并对其作出反应的可能性

您必须使用以下选项来更新操作导航:

  • 使用图书馆
  • 或者将
    历史
    道具从
    组件
    传递到
    操作
    ,并使用它在其中导航
  • 第二种选择是官方推荐的:

    您可以将提供用于将组件路由到您的操作的历史对象传递到您的操作并在那里导航,而不是分派操作进行导航

    如何使我的组件可以访问“历史”道具。当我使用react-dev工具调试组件时,在其道具列表中看不到历史记录。你能给我举一个实施这种方法的工作实例吗?
    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);
    
            });
        }
    }