React Router中如何匹配URL中的数组参数并解析为可用数组？

该需求完全可以实现，按如下方式修改代码即可：

1. 修改路径匹配规则 #

给project路径的参数添加正则约束，允许参数内容包含逗号：

const SEARCH_FORM_PAGES = [ 
  // 正则约束参数仅支持字母、数字、下划线、逗号，避免匹配到非法路径
  'project/:projectGuid([a-zA-Z0-9_,]+)',
  'analysis_group/:analysisGroupGuid',
  'family/:familyGuid',
]

2. 新增参数预处理逻辑 #

将Route的component属性替换为render属性，在渲染组件前把逗号分隔的项目ID字符串转换为数组，再传递给VariantSearchForm：

const VariantSearch = ({ match }) =>
  <Switch>
    <Route 
      path={SEARCH_FORM_PAGES.map(pagePath => `${match.url}/${pagePath}`)} 
      render={(routeProps) => {
        // 仅处理项目路径的参数
        if (routeProps.match.params.projectGuid) {
          const projects = routeProps.match.params.projectGuid.split(',')
          return <VariantSearchForm {...routeProps} projects={projects} />
        }
        // 其余路径正常透传参数
        return <VariantSearchForm {...routeProps} />
      }}
    />
  </Switch>

修改完成后，当访问project/F001_D1K2,F002_D1K3,F003_D2K5路径时，VariantSearchForm组件可直接从props中获取到projects: ['F001_D1K2', 'F002_D1K3', 'F003_D2K5']，其余路径的匹配逻辑不会受到影响。

内容的提问来源于stack exchange，提问作者Nikita Vlasenko