Reactjs React router dom useParams 不适用于动态 url

Question

使用“react-router-dom”：“^5.2.0”和“react”：“16.8.6”，

我有这个：

<Switch>
   <Route path="/users" component={Users} />
   <Route path="/users/:id" component={Users} />
</Switch>

并在用户组件中：

const param = useParams();
console.log(param);

因此，如果我输入/users或/users/10始终将参数呈现为空对象。我在这里缺少什么？

Answer 1

该Switch组件将仅呈现其第一个匹配项。

第一个Route匹配路径的/users/10是<Route path="/users" component={Users} />。

这意味着即使你有第二个Route说“10”应该是一个名为 的参数id，它也会忽略它并将其视为第一个Route没有参数的参数。

exact您可以通过使用第一个上的 prop轻松纠正此行为Route：

<Route exact path="/users" component={Users} />

这将指示react-router仅在 URL 与path 完全匹配时才匹配该路由，并且允许/users/10向下传递到Route您实际希望它匹配的 。然后您将获得您期望的可用参数。