获取当前匹配的路线

Question

我有一个等待列表页面，可以通过以下路径访问

example.com/waiting-list
example.com/waiting-list/success/:email
example.com/waiting-list/ref/:ref_code

在每种情况下，我都需要显示正确的UI，因此需要一种方法来检查从哪个案例/ URL访问页面。我似乎无法在文档中找到它：/ https://github.com/reactjs/react-router

路线：

<Route path='/waiting-list' component={WaitingListPage} />
<Route path='/waiting-list/ref/:ref_code' component={WaitingListPage} />
<Route path='/waiting-list/success/:ref_code' component={WaitingListPage} />

由于所有路由都会导致相同的组件（WaitingListPage），并且因为视图会根据匹配的路由略有不同，所以我需要在WaitingListPage组件中找到3个中的哪一个路线匹配。

Answer 1

要确定您遵循的路线，您只需检查组件内this.props.route.path的值即可。这将显示匹配的路线。

您可能觉得有用的另一个属性是this.props.routeParams，它是一个对象，其中包含每个路径参数的值（在本例中为ref_code的值）。

如果由于某种原因，您宁愿使用传统的javascript方法，那么您只需获得当前path的{​​{1}}部分：

URI

但是，您可能会在window.location.pathname 下找到类似的对象，因为它也会包含this.location，pathname等属性。