路由/用户，/ users /：id和/ users / online可以与react-router共存吗？

Question

出于向后兼容的原因，我被要求创建以下3条路线：

• /users列出了所有用户
• /users/:id按ID
转到一个用户的详细视图
• /users/online是/users的过滤视图，其中只有在线用户在场。

我知道online永远不会是有效的id，所以它永远不会在概念上与/users/:id端点发生碰撞，但是反应路由器能够处理这个吗？

以下是我迄今为止所尝试的内容，该内容未按预期运行：

<Route exact path="/users" component={UserList} />
<Route exact path="/users/:id" component={UserDetail} />
<Route exact path="/users/online/:q" component={UserList} />

Answer 1

您必须将online路由放在类似通配符的参数:id之前。 因为/:id和/online处于同一级别，并且:id之前已定义，当您到达/online时，它将被捕获为“id”。

<Route exact path="/users" component={UserList} />
<Route exact path="/users/online/:q" component={UserList} />
<Route exact path="/users/:id" component={UserDetail} />