Question

我在连接到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组件中，我将其包含在withRouter和redux

中

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

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

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

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

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

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

Answer 1

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

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

这样的东西

HomePage

并将App定义为具有

等处理程序

<BrowserRouter>
  <App/>
</BrowserRouter>

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

1 个答案: