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

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

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

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

          <Route path="*" ponent={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)'

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

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

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

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

          <Route path="*" ponent={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)'

• javascript
• arrays
• reactjs
• regex
• react-router

Share Improve this question Follow edited Jan 30, 2022 at 8:27 Marzieh Mousavi asked Aug 15, 2021 at 21:43 Marzieh MousaviMarzieh Mousavi 1,63411 gold badge1818 silver badges3030 bronze badges 2

• Are you saying/asking how to render separate routes for these different categories? – 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 Commented Aug 15, 2021 at 21:57

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

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

1. Render a single path with a match parameter. This allows you to dynamically handle any category value.

   <Route path='/categories/:category' ponent={itemList} /> 
   

2. 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}`)}
     ponent={itemList}
   />
   

3. 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("|")})`}
     ponent={ItemList}
   />
   

4. Render a route for each category. This allows you to handle specifically allowed categories but basically duplicates the Route ponent.

   {
     itemCategories.map(cat => (
       <Route key={cat} path={`/categories/${cat}`} ponent={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.

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

<Route path="/categories/:cat" ponent={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}}` ponent={itemList}/>
           }}

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