Reactjs反应路由器dom useParams不适用于动态网址

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没有参数。

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

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

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