javascript - 获取当前匹配的路由

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)，并且 View 会根据匹配的路由而略有不同，因此我需要在 WaitingListPage 中查找组件匹配 3 个路由之一。

Answer 1

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

您可能会发现有用的另一个属性是 this.props.routeParams，它是一个对象，其中包含每个路由参数的值(在本例中为 ref_code )。

<小时/>

如果您出于某种原因更愿意使用传统的 javascript 方法，您可以简单地获取当前 URI 的 path 部分:

window.location.pathname

不过，您可能会在 this.location 下找到类似的对象，因为它也包含 pathname、basename 等属性等