Había pasado el parámetro a otro componente a través de Link
{props.posts.map((post)=>{ return (<> <tr > <td>{post.title}</td> <td class="pull-right" id="underline"><Link to={{pathname:"/details",state:{title:post.title}}} >Details</Link> </td> </tr> </>) })} Pero cuando traté de extraer el valor del título en mi componente Detalles, mostró un error.
Mi Details.js es como
import React from 'react' import { useLocation } from 'react-router-dom'; export default function Details(props) { return ( <div> <section class="section"> <br /> <section class="details"> <h4>Title:{props.location.state.title} </h4> <br /> <h4>Categories: </h4><br /> <h4>Content: </h4> </section> <br /> </section> </div> ) }Recibí el error como
TypeError: no se pueden leer las propiedades de undefined (leyendo 'estado')
Está tratando de acceder a los datos de accesorios, mientras que ha pasado datos desde el componente Link , y no directamente al componente que se va a renderizar, para resolver este problema, puede utilizar el gancho useRouter . En primer lugar, cree una instancia de este enlace. Utilice la instancia creada para profundizar en el objeto de estado.
Si está utilizando react-router-dom v6 y superior, se realizan algunas actualizaciones sintácticas. path y state deben pasarse como accesorios separados y las propiedades del estado deben envolverse dentro de {} .
{props.posts.map((post)=>{ return (<> <tr > <td>{post.title}</td> <td class="pull-right" id="underline"><Link to={"/details"} state={{title:post.title}}>Details</Link> </td> </tr> </>) })}MisDetalles.js
import React from 'react' import { useLocation } from 'react-router-dom'; export default function Details(props) { const location = useLocation() //Instance of useLocation hook. return ( <div> <section class="section"> <br /> <section class="details"> <h4>Title:{location.state.title} </h4> <br /> <h4>Categories: </h4><br /> <h4>Content: </h4> </section> <br /> </section> </div> ) }