how can i use array in routing with react-router

Question

This is my routing with regex pattern by react-router. ItemList component appears when the URL is /categories/cat1 or /categories/cat2 or /categories/cat3 or /categories/cat4 or /categories/cat5 or /categories/cat6 otherwise NotFound component appears.

function App() {
  return (
    <Router>
      <Header />
      <Container >
        <Switch>

          <Route exact path='/' component={Home}  />

          <Route path='/categories/(cat1|cat2|cat3|cat4|cat5|cat6)' component={ItemList} />

          <Route path="*" component={NotFound} />

        </Switch>
      </Container>
      <Footer />
    </Router>
  );
}

I want to use dynamic array for ItemList routing like this:

const itemCategories = ['cat1','cat2','cat3','cat4','cat5','cat6'];

in this path:

path='/categories/(cat1|cat2|cat3|cat4|cat5|cat6)'

Are you saying/asking how to render separate routes for these different categories? — Drew Reese
– Drew Reese, Commented Aug 15, 2021 at 21:51
kinda. i want to route just for cat1 to cat6. if user types something else like categories/cat7 notFound page will appear. — Marzieh Mousavi
– Marzieh Mousavi, Commented Aug 15, 2021 at 21:57

Drew Reese · Accepted Answer · 2021-08-15 22:07:18Z

3

If I understand your question you want to render a route that handles multiple categories.

Render a single path with a match parameter. This allows you to dynamically handle any category value.
```
<Route path='/categories/:category' component={itemList} /> 
```
Render a single route with a path array. This allows you to handle specifically allowed categories. This results in path={["/categories/cat1", "/categories/cat2", ... , "/categories/cat6"]}.
```
<Route
  path={itemCategories.map(cat => `/categories/${cat}`)}
  component={itemList}
/>
```
Render a single route with a path array and map in the regex. This results in path='/categories/(cat1|cat2|cat3|cat4|cat5|cat6)' as you were looking for.
```
<Route
  path={`/categories/(${itemCategories.map((cat) => cat).join("|")})`}
  component={ItemList}
/>
```
Render a route for each category. This allows you to handle specifically allowed categories but basically duplicates the Route component.
```
{
  itemCategories.map(cat => (
    <Route key={cat} path={`/categories/${cat}`} component={itemList} />
  ))
}
```

I want to route just for cat1 to cat6. If user types something else like categories/cat7 notFound page will appear.

For this I would suggest option 2 or 3.

edited Aug 15, 2021 at 22:07

answered Aug 15, 2021 at 21:54

Drew Reese

207k19 gold badges280 silver badges293 bronze badges

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

3 Comments

Marzieh Mousavi Over a year ago

yes. thank you. option 2 is what i wanted =D

Drew Reese Over a year ago

@SMarziSM It's not a common use case, but the utility react-router uses for route path pattern matching does allow for a sort of regex. I tested it out and it does appear to work from React/JSX. I added a fourth option (option 3) that also appears to work.

Marzieh Mousavi Over a year ago

i tried both (option 2 and 3) and both worked for routing but in option 2 match.params was empty in my component. i think option 3 is better . thanksss.

Nitsan Cohen · Accepted Answer · 2021-08-15 21:57:45Z

0

You can use : to set it to a dynamic route like this:

<Route path="/categories/:cat" component={itemList} />

and then render the route according to the users choice

Or you can map the routes like this:

 {itemCategories.map(route => {
             return <Route path=`/categories/${route}}` component={itemList}/>
           }}

I'm not sure what you want so I gave both options

edited Aug 15, 2021 at 21:57

answered Aug 15, 2021 at 21:51

Nitsan Cohen

7114 silver badges6 bronze badges

2 Comments

Marzieh Mousavi Over a year ago

i want to route JUST for cat1 to cat6. in this way that you mention we should check the match params in the component but i want to handle it in app.js with regex.

Nitsan Cohen Over a year ago

Then go with my section option with the map

Collectives™ on Stack Overflow

how can i use array in routing with react-router

2 Answers 2

3 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related