1

Buen día, estoy usando la librería de react router dom para lo que es una aplicación de las características de cada uno de los países del mundo, bueno el problema surge que cuando mando las propiedades que capturo del método fetchCountry y los mando a mi componente card, lo que me gustaría hacer si es posible o si hay una solución mas factible es que cuando le doy click al componente link este me mande al componente Descripcion.js y hay lo que quiero es mostrar todas las características de cada pais que vaya seleccionando

import { useState,useEffect } from "react";
import Card from "./Card";

const Section1 = () => {

    const [error, setError] = useState(null);
    const [isLoaded, setIsLoaded] = useState(false);

    const [items, setItems] = useState([]);

    const fetchCountry = async () => {
      fetch('https://restcountries.com/v2/lang/es')
      .then(res => res.json())
      .then((data) => {
          setIsLoaded(true);
          setItems(data);
      },
        (err) => {
          setIsLoaded(true);
          setError(err);
        }
      );
    }

    useEffect(() => {
        fetchCountry();
      }, [])
      
      if (error) {
        return <div>Error: {error.message}</div>;
      } else if (!isLoaded) {
        return <div>Loading...</div>;
      } else {
        return (
          <section>
              <div className="flex flex-wrap p-1 m-10">
              { 
                items.map((item) => (
                  <div className="mr-8 mb-10" key={item.name} >
                  <Card {...item}/>
                  </div>
                ))
              }
              </div>
          </section>
          
    )
  }
}
export default Section1

Aquí se puede ver el componente section que lo que hace es llamar a la api de apicountry y los datos los mando a mi componente Card.js

import { Link } from "react-router-dom"
const Card = ({ name, flag, population, region, capital, ...props }) => {

  return (
      <div className="w-280 h-full shadow-md rounded-md">
                    <Link to={`/description/${name}`} params={ props }>
          <img className="rounded-t-md w-full h-180" src={flag} alt="" />
                    </Link>
          <div className="p-2 mt-4 mb-10 mx-3">
              <h1 className="font-bold text-xl mb-3">{name}</h1>
              <h2 className="font-bold my-1">Population:<span className="font-normal ml-1">{population}</span></h2>
              <h2 className="font-bold my-1">Region:<span className="font-normal ml-1">{region}</span></h2>
              <h2 className="font-bold my-1">Capital:<span className="font-normal ml-1">{capital}</span></h2>
          </div>
      </div>
   )
};

export default Card;

Aquí en mi componente Card recibo las props e itero algunos datos como el nombre del pais, la region y la capital ahora bien en lo que es el componente link al darle click me dirige al componente description, pero ahora estando dentro de este componente quisiera agregar algunas de las descripciones que me incluye la api como el lenguaje, distancia, clima etc. pero no logro hacer que las props que recibo de card las pueda mandar por medio del componente link a mi componente descripcion y hay dentro poder iterar las propiedades faltantes, cualquier ayuda que puedan brindarme seria de gran ayuda y la apreciaría mucho de antemano gracias

1
  • Si pudieras decirnos que versión de react-router estas usando, saludos
    – g.4
    Commented el 24 ene. 2022 a las 22:54

2 respuestas 2

2

Nótese la diferencia entre react-router V5 y V6

Se puede configurar el componente Link con link to: object.


React Router V5

<Link to={{
      pathname:`/description/${name}`,
      state:"any type"
}}>
   mi link
</Link>

React Router V6

<Link to={`/description/${name}`} state:{"any type"}>
   mi link
</Link>

Luego, se recibe con el hook useLocation:

function myRouteComponent(){
  const location = useLocation();
  console.log(location.state);//"any type"

  return null;
}

Ahora bien, no se puede pasar props tal cual:

//react router v5
<Link to={`/description/${name}`} params={ props }>
//link to object invalido
 <Link to={{
          pathname:`/description/${name}`,
          state:props
    }}>
       mi link
 </Link>

Si se pasa props dentro del objeto, se obtendra el siguiente mensaje de error:

DataCloneError: The object can not be cloned.

Entonces, se debe crear una estructura personalizada para enviar datos con el parametro state en link to: object.


React Router V5

  <Link to={{
              pathname:`/description/${name}`,
              state:{
                flag,
                population,
                region
              }
        }}>
           mi link
  </Link>

React Router V6

  <Link to={`/description/${name}`} 
        state:{{
                flag,
                population,
                region}
  }>
           mi link
  </Link>

Espero que esta respuesta sea de ayuda.

1
  • 1
    Muchas gracias por tu respuesta en este caso pude resolver el problema en la version 5
    – itsMarck
    Commented el 20 feb. 2022 a las 5:48
1
import { useNavigate } from "react-router-dom";

const navigate = useNavigate();

const toDescription=()=>{
  navigate(`/description/${name}`,
            {
              state:{
                name, 
                flag, 
                population, 
                region, 
                capital, 
                subregion,
                topLevelDomain,
                nativeName,
                currencies,
                languages, 
              }});
    }

Les dejo esta pequeña respuesta a la solucion que encontre para la version 6 en este caso en donde tengan sus variables y las vayan a madar a otro componente importen useNavigation, en este caso como pueden ver en la parte de navigate() coloco mi ruta a donde me va a dirigir y agrego el estado con los valores que quiero que mande a la otra ruta.

Para terminar lo que hice fue quitar el link que cubría mi componente img como puede ver en mi código y simplemente agregue un onClick={toDescription}, con eso me mandaba a mi componente description y con useLocation() ya iteraba los datos dentro del state

2
  • 1
    Vote por tu respuesta también, pero me queda una duda ¿Como aplicas toDescription, lo pones como valor de to en Link? saludos
    – g.4
    Commented el 20 feb. 2022 a las 16:53
  • 1
    Si mira, en este caso lo que yo hice fue quitar el link que cubría mi componente img como puede ver en mi código y simplemente agregue un onClick={toDescription}, con eso me mandaba a mi componente description y con useLocation() ya iteraba los datos dentro del state.
    – itsMarck
    Commented el 21 feb. 2022 a las 0:48

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.