更新路由器的历史位置（使用反应路由器-DOM）

我有一个路由器，它看起来像这样更新路由器的历史位置（使用反应路由器-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更新网址并浏览我“something.do?phase=something”，但我看不到路的history.location得到更新。正因为如此（我认为），当我点击页面上的某个链接'something.do?phase=something'时，只有页面的url会改变，但导航到新页面不会发生。

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

来源

2017-04-26 abhi

这是因为react-router并不直接依赖于window.history，而是使用this history project，它包装window.history，并提供react-router与聆听位置更新并对其作出反应的可能性。

你必须选择更新从你的行动导航：

使用react-router-redux库。
或通过history道具从您的Component到您的actions并使用它来浏览它们。

第二种选择是react-router doc officialy建议之一：

比派遣行动导航，你可以通过提供路由组件到你的行动历史记录对象，并用它导航有相反。

来源

2017-04-27 09:23:09 fkulikov

如何使我的组件可以访问“历史”道具。当我使用react dev工具调试我的组件时，我没有在其道具列表中看到历史记录。您能否指出我已经实施了这种方法的任何工作示例？ – abhi

更新路由器的历史位置（使用反应路由器-DOM）

回答

相关问题