Soy novato con reaccionar pero vi algo raro. Tengo todas mis rutas algo así como a continuación:
<Main> <Route exact path="/home" component={Home} /> <Route exact path="/home1" component={Home1} /> <Route exact path="/home2" component={Home2} /> <Route exact path="/home3" component={Home3} /> <Route exact path="/home4" component={Home4} /> <Route exact path="/home5" component={Home5} /> <Redirect from="*" to="/home" /> </Main> ¿Hay alguna forma de usar una array y un map en lugar de pegar otro componente <Route /> ?
Pienso en algo como esto:
routes.ts const routes = [ { path: "/home", component: SomeComponent }, { path: "/home2", component: SomeComponent2 }, ]; indes.tsx <Main> { routes.map(route => ( <Route exact path={route.path} component={route.component} /> ))} </Main> pero no sé cómo pasar un nuevo componente al objeto en la lista de routes .
¡Gracias por cualquier ayuda!
Nota: ¿Qué versión de react-router-dom estás usando? Este es un ejemplo de código para RRD6
const routes = [ { name: "/route1", component: <ClickLabel /> }, { name: "/route2", component: <Focus /> }, { name: "/route3", component: <Counter /> } ]; /*--------------***/ {routes.map(({ name, component }, i) => ( <Route key={i} path={name} element={component} /> ))}Aquí hay un ejemplo: https://codesandbox.io/s/happy-swartz-ikqdn?file=/src/App.js
Si está utilizando RRDv5, aquí está el código
{/* Want to pass some dynamic props */} {routes.map(({ name, component }, i) => ( <Route key={i} path={name} render={() => { return React.createElement( component, { p: "THis is the prop" }, null ); }} /> ))} {/* Simply render a component */} {routes.map(({ name, component }, i) => ( <Route key={i} path={name} component={component} /> ))}