Estoy aprendiendo React con enrutamiento y llamadas api en este momento. Tengo una API donde necesito encontrar todas las direcciones URL y publicarlas en una página que fue exitosa. Pero ahora necesito hacer una página de detalles donde pueda mostrar más información sobre la url. La página 1 es como: reunir todas las URL y mostrarlas en una lista. Y la página 2 es si ha hecho clic en una URL en la lista de la página 1, se lo llevará a la página 2, donde se muestra un cuadro de diálogo detallado. Tengo la página 1 completa y puedo navegar a la página 2, pero no puedo mostrar ningún dato de la API en la página de información/detalles de la página 2. No sé cómo trabajar con la clave y obtener la información. Intenté varias cosas pero ninguna funciona. Estoy usando link.Link como clave y necesito propiedad de descripción, url, nombre de API.
Esta es mi página 1:
import React from "react"; import {Link, NavLink} from 'react-router-dom'; import { Detail } from './Detail'; export default class FetchLinks extends React.Component { state = { loading: true, links: [], }; async componentDidMount() { const url = "https://api.publicapis.org/entries?category=development"; const response = await fetch(url); const data = await response.json(); this.setState({links: data.entries, loading: false}); } render() { if (this.state.loading) { return <div>loading...</div> } if (!this.state.links.length) { return <div>geen links gevonden</div> } return ( <div> {this.state.links.map(link => ( <div key={link.Link}> <ul><li> <p> <NavLink to={`/Detail/${link.Link}`}> {link.Link} </NavLink> </p> </li></ul> </div>))} </div> ); } }esta es la pagina 2:
import React from 'react'; import Content from './Content'; const Detail = () =>{ return( <div> <h1>Detail Page</h1> <p>{this.state.links.Link}</p> </div> ) } export default Detail();Entonces, si entendí correctamente, tiene todos sus datos en la página 1 y necesita pasar los datos a la página 2. Para esto, debe escribir su NavLink así:
<NavLink to={{ pathname: `/Detail/${link.Link}`, state: link.Link }}> {link.Link} </NavLink>Ahora puede usar el enlace UseLocation de react-router para acceder a este estado que acaba de pasar. Así que en la página 2:
import React from 'react'; import { useLocation } from "react-router-dom"; const Detail = () =>{ const location = useLocation(); return ( <div> <h1>Detail Page</h1> <p>{location.state.link}</p> </div> ); } export default Detail();Puede leer más sobre los ganchos de enrutador de reacción aquí .