连接到withRouter的组件未收到正确的匹配属性

时间:2017-12-05 16:24:41

标签: reactjs react-router

我在连接到withRouter

的组件中显示正确的匹配属性时遇到问题

我的路由器地图看起来像这样

<BrowserRouter>
  <div>
    <Switch>
      <Route path="/" component={HomePage} />
      <Route path="/start/:short_code/*" render={() => <div>Magic</div>} />
      <Route path="/events" component={EventsPage} exact/>
      <Route path="/events/:auction_code" />
      <Route component={NotFoundPage} />
    </Switch>
    <MainMenu />
    <LoginPage />
    <HoldersDrawer />
  </div>
</BrowserRouter>

在我的HomePage组件中,我将其包含在withRouterredux

export default withRouter(connect(mapStateToProps)(HomePage));

但是,我尝试访问的任何地方this.props.match我只看到

{
    isExact:false,
    params:{},
    path:"/",
    url:"/"
}

即使我已将网址设置为我概述的其中一条路线

主页上有一个QR扫描器,无论用户在哪条路线上,我都希望它处于活动状态,但我也希望能够在HomePage上访问用户所在的当前路线。 例如,用户可以导航到events/auction_code,当他们执行和操作时,我需要能够将相关的auction_code传递给API调用所述的操作调用,目前我必须将其解析出来当前位置路径名数据。如果我能从match.params对象中获取它,那就太好了。

有人可以在这里看到我可能做错的事情会引起这个问题吗?

1 个答案:

答案 0 :(得分:0)

withRouter没有为您提供匹配Route的匹配道具的原因是因为withRouter允许您访问history对象的属性和最接近的<Route>'s match,在您的情况下{{1没有任何最匹配的路线。

通过将处理程序传递给Routed组件并将操作提升到呈现Route的Component,您可以实现所需。像

这样的东西
HomePage

并将App定义为具有

等处理程序
<BrowserRouter>
  <App/>
</BrowserRouter>