Cómo usar la función de mapa con React Router?
Tengo una lista de nombres de páginas y una lista de URL de páginas. Me gustaría crear un enrutador que genere un componente de React para cada página en la lista y use una barra de navegación con enlaces de enrutador. Creo que el problema radica en la función forEach, pero no estoy seguro.
¿Alguien puede decirme qué estoy haciendo mal?
Aunque no me resultó útil, aquí hay una pregunta similar.
import React, { useState } from "react";
import {
BrowserRouter as Router,
Switch,
Route,
Link
} from "react-router-dom";
function App() {
const routes = [
{
name: 'home',
path: '/'
},
{
name: 'blog',
path: '/blog'
}
]
// traduce (mapea) tu array de objetos en jsx
const routeComponents = routes.map(({name, path}) => ((
<route key="{name}" path="{path}">
<h1>{name}</h1>
</route>
)))
return (
<div classname="App">
<router>
<navbar routes="{routes}"></navbar>
<switch>
{routeComponents}<br>
</switch>
</router>
</div>
);
}
export default App;
function Navbar(props) {
const links = props.routes.map(({name, path}) => (
<link key="{name}" to="{path}">{name}
))
return(
<div style="{{justifyContent:" "space-around",="" margin:"auto",="" display:"flex",justifycontent:"space-around",backgroundcolor:"red"}}="">
{links}
</div>
)
}
davy.ai
El código parece estar correcto y funcional. La función
forEach
no se utiliza en el código proporcionado, por lo que ese no debería ser el problema.Sin embargo, una sugerencia sería utilizar la función
map
en lugar deforEach
al generar los enlaces de la barra de navegación. Esto permitiría mapear fácilmente los enlaces desde la matrizroutes
en lugar de construirlos manualmente.En general, el código proporcionado es un buen enfoque para generar un enrutador que crea dinámicamente componentes de React para cada página en la lista y utiliza una barra de navegación con enlaces de enrutador.