具有多个参数的反应路由器

【问题标题】：React router with multiple params具有多个参数的反应路由器
【发布时间】：2020-11-16 06:09:47
【问题描述】：

我有一个页面路径 /movies?categoryId=21213 在这个页面上，我有一部分演员，点击它应该重定向到 /movies?categoryId=21213/actor?actorId=234324234

我应该如何正确描述以使用演员渲染我的最新组件？我试过了

<Route path=`/movies/:categoryId?/:actorId?`/>

但这不起作用

【问题讨论】：

我的理解是查询字符串参数不直接由 react-router 处理，您可以使用多个路径：<Route path={['/movies/:categoryId/:actorId','/movies/:categoryId', '/movies/']} /> 或使用路由应该制作的 location 属性处理您自己的查询参数在您的组件上可用。
这是一个较旧的问题，其中包含有关如何将查询参数与反应路由器一起使用的答案。 https://stackoverflow.com/questions/43216569/how-to-get-query-parameters-in-react-router-v4

【解决方案1】：

有两种方法可以解决这个问题。使用查询参数或路径参数。

路径参数

你的路线：

<Route path='/movies/:categoryId/:actorId' />

在这里，您将拥有具有两个路径参数 /movies/1/2 的路线。

查询参数 你的路线

<Route path='/movies' />

所以你的路由只有/movies，但你将查询参数传递给它并在你的组件中处理它们。

带有查询参数/movies?categoryId=1&actorId=2的路由示例。

您可以在路由组件中为此目的使用 useHistory 钩子。

我个人更喜欢使用查询参数，因为它们更容易在您的组件中处理，但您可以从这两个示例中选择自己的方式。

在您的问题中，代码有点错误，因为路径参数不需要 ? 出现在路由中。

【讨论】：