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

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

所以你的网址必须是这样的：

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 作为查询字符串发送会更合适。

所以你的网址可以是：

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

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

解析查询字符串的最简单方法是使用一个名为query-string. 安装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 定义中，不需要在 url 中放置 ids：

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