路由 /users、/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} />