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)'
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.
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
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.