时间戳

首页 > 解决方案 > 在 React Router 中匹配 url 中的值数组

reactjs - 在 React Router 中匹配 url 中的值数组

问题描述

我有这样的代码：

const SEARCH_FORM_PAGES = [ 
  'project/:projectGuid',
  'analysis_group/:analysisGroupGuid',
  'family/:familyGuid',
]

const VariantSearch = ({ match }) =>
  <Switch>
    <Route path={SEARCH_FORM_PAGES.map(pagePath => `${match.url}/${pagePath}`)} component={VariantSearchForm} />,
  </Switch>

现在我想匹配project/:projectGuidurl 中的一个数组，而不仅仅是一个参数:projectGuid，这可能吗？例如，我会有这样一个 url：project/F001_D1K2,F002_D1K3,F003_D2K5并且我希望该部分F001_D1K2,F002_D1K3,F003_D2K5被匹配并转换为一个数组projects，我可以在VariantSearchForm组件中获取该数组。

标签： reactjsreact-router

解决方案

你可以像这样发送多个参数：

/project?items=F001_D1K2&items=F002_D1K3&items=F003_D2K5

然后，使用query-string库将其排列为数组：

import qs from "query-string";
import { useLocation } from "react-router-dom";

const VariantSearchForm = () => {
  const { search } = useLocation;
  const parsed = qs.parse(search);
  console.log(parsed.items);
  // => ["F001_D1K2", "F002_D1K3", "F003_D2K5"]
};

推荐阅读