Match an array of values in url in React Router

Question

I have such code:

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>

Now I want to match an array in the project/:projectGuid url instead of just a single parameter :projectGuid, is it possible? I would have such a url for instance: project/F001_D1K2,F002_D1K3,F003_D2K5 and I want the part F001_D1K2,F002_D1K3,F003_D2K5 to be matched and converted into an array projects which I would be able to get in the VariantSearchForm component.

pedram afra · Accepted Answer · 2021-08-31 21:37:52Z

1

you can send multiple params like this:

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

and then, make it to array, using query-string library:

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"]
};

answered Aug 31, 2021 at 21:37

pedram afra

1,2321 gold badge12 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Match an array of values in url in React Router

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related