如何在 React Router 中获取多个字符串参数

Question

我需要像这样捕捉 url ：

localhost:3000/mypage/name/123/234/345/456

我知道我可以使用这样的路线：

<Route path='/mypage/:pagename/:ids' component={MyComponent}/>

我不知道如何在 ids 中获取一个整数数组（我知道实际上它们是字符串）。 请注意名称后项目上的数字可以更改。

有什么帮助吗？ 谢谢你们。

Answer 1

对于这种情况，您应该使用查询参数

    <Route path='/mypage/:pagename' component={MyComponent}/>

和 URL 可以是localhost:3000/mypage/name?id=123&id=234&id=345&id=456

这样您就可以在组件内获取查询参数数组并处理该数据

Answer 2

您只需为 id 使用一个路由参数。

所以你的 url 必须是这样的：

localhost:3000/mypage/name/123,234,345,456

你可以像这样访问这个 id：

const ids= this.props.match.params.ids;  //if functional component, props...

const idsIntArray = ids.split(',').map(Number);   // [123, 234, 345, 456]

作为替代方案，将您的 id 作为查询字符串发送会更合适。

所以你的 url 可以是：

localhost:3000/mypage/name?ids=123,234,345,456

在您的组件中，您可以获得 ids 查询字符串，并将其解析为数组。

解析查询字符串的最简单方法是使用名为query-string的 package 。 使用npm i query-string安装它并导入后，您可以读取 ids 查询字符串并将其转换为 int 数组，如下所示：

import queryString from 'query-string'


const ids= queryString.parse(this.props.location.search.ids);  //if functional component, props...

const idsIntArray = ids.split(',').map(Number);   // [123, 234, 345, 456]

这样，在您的 Route 定义中，无需将 id 放入 url 中：

<Route path='/mypage/:pagename' component={MyComponent}/>