Este es mi enrutamiento con patrón regex por react-router. El componente ItemList aparece cuando la URL es /categories/cat1 o /categories/cat2 o /categories/cat3 o /categories/cat4 o /categories/cat5 o /categories/cat6 ; de lo contrario, aparece el componente NotFound .
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> ); }Quiero usar una matriz dinámica para el enrutamiento de ItemList de esta manera:
const itemCategories = ['cat1','cat2','cat3','cat4','cat5','cat6'];en este camino:
path='/categories/(cat1|cat2|cat3|cat4|cat5|cat6)'Si entiendo su pregunta, desea generar una ruta que maneje múltiples categorías.
Renderice una sola ruta con un parámetro de coincidencia. Esto le permite manejar dinámicamente cualquier valor de categoría.
<Route path='/categories/:category' component={itemList} /> Renderice una sola ruta con una matriz de ruta. Esto le permite manejar categorías específicamente permitidas. Esto da como resultado path={["/categories/cat1", "/categories/cat2", ... , "/categories/cat6"]} .
<Route path={itemCategories.map(cat => `/categories/${cat}`)} component={itemList} /> Representa una ruta única con una matriz de ruta y un mapa en la expresión regular. Esto da como resultado path='/categories/(cat1|cat2|cat3|cat4|cat5|cat6)' como estabas buscando.
<Route path={`/categories/(${itemCategories.map((cat) => cat).join("|")})`} component={ItemList} /> Renderice una ruta para cada categoría. Esto le permite manejar categorías permitidas específicamente, pero básicamente duplica el componente Route .
{ itemCategories.map(cat => ( <Route key={cat} path={`/categories/${cat}`} component={itemList} /> )) }Quiero enrutar solo para cat1 a cat6. Si el usuario escribe algo más, como categorías/cat7, aparecerá la página notFound.
Para esto sugeriría la opción 2 o 3.
Puede usar : para configurarlo en una ruta dinámica como esta:
<Route path="/categories/:cat" component={itemList} />y luego renderizar la ruta de acuerdo con la elección de los usuarios
O puede mapear las rutas así:
{itemCategories.map(route => { return <Route path=`/categories/${route}}` component={itemList}/> }}No estoy seguro de lo que quieres, así que di ambas opciones.