React router-dom <Link> 以传递多个参数并使用 useParams 访问它们

Question

我使用：

import { Link } from "react-router-dom";

我正在传入多个参数，如下所示：

<Link to={`/tech/${data.foo}${data.bar}`}>{data.you}</Link>

我尝试使用useParams访问我传递的参数，如下所示：

let { foo } = useParams<{foo:string}>();
let { bar } = useParams<{bar:string}>();

我可以访问foo，但如果我console.log，bar会显示undefined。但如果我这样做：

<Link to={`/tech/${data.bar}/${data.foo}`}>{data.you}</Link>

然后我可以访问data.bar，但不能访问数据_foo

<div>{foo}</div>
<div>{bar}</div>

有人知道如何正确地写这篇文章吗？这样我就可以像我试图做的那样，传递2个参数并使用useParams访问它们吗？谢谢

Answer 1

正如您在这个运行示例中看到的，只要正确定义Route，就可以传递多个参数。

<Route path="/page/:foo/:bar" component={Page} />

必须使用:为两个工件定义一个参数。

然后像const { foo, bar } = useParams();一样访问就可以了。你也可以像在问题中那样把它们分开，但这种方式更简洁。