Soy totalmente principiante en reaccionar. Traté de mejorar mi habilidad día tras día. Hoy estoy atascado en un problema, quiero crear una ruta dinámica con caracteres JSON (aquí dragon ball z) Mis rutas son correctas pero quiero mostrar la biografía solo en los personajes en los que se hace clic como "hago clic en goku show goku bio" Quiero hacerlo sin REACT HOOKS (no useLocation, useParams ect..). En este momento estoy totalmente atascado
Me puedes ayudar ? ¿Como lo puedo hacer?
Gracias por la ayuda :)
aquí está el blitzstack de mi proyecto:
No sé por qué está usando react-router-dom y luego no lo usa realmente para lo que fue diseñado. Está trabajando con componentes de función, por lo que puedo decir, cualquier solución requerirá un gancho React. Ya sea que solo use el useParams para obtener la id para filtrar, o si declara un estado de id en el padre con useState , o crea un contexto React y usa useState y useContext , o usa Redux y useDispatch y useSelector . ¿Ves a dónde se dirige esto?
Sugiero simplemente usar el gancho useParams ya que es el más trivial de implementar.
Corrija la ruta biográfica del personaje para que el parámetro de coincidencia de ruta de id sea más fácil de leer y consumir.
<Route path="/CharBio/:id" element={<CharBio />} /> Con path="/CharBio:id" el enlace inyectaría un carácter : inicial en el id con to={`/CharBio${element.id}`} , es decir, en lugar de "goku" , el parámetro id sería ":goku" , y esto no funciona fácilmente para el filtrado.
Corrige el enlace en Perso para que se vincule a una "/CharBio/:id" .
<Link to={`/CharBio/${element.id}`}> <h1>{element.id}</h1> </Link> Use el gancho useParams en el componente CharBio y filtre los datos de la API por id .
export default function CharBio() { const { id } = useParams(); const element = API.find(el => el.id === id); return element ? <p>{element.bio}</p> : null; }