este es el código del primer componente al que le envío los accesorios
const Devcard = ({dev}) => { return ( <Link to={{pathname:`/dev/${dev._id}`, devProps:{dev:dev}}}> <Button variant="primary">Learn More</Button> </Link> </Card.Body> </Card> ); };y este es el componente que obtengo en él, los Props. estoy recibiendo accesorios indefinidos aquí
const DevProfile = (props) => { console.log(props.location.devProps.dev); return ( <div></div> )por favor revise mi código, gracias
Supongo que el componente DevProfile se procesa al hacer clic en el botón. Puede aprovechar el enlace useLocation de react-router-dom para acceder a los accesorios pasados a través de Link. Como esto-
import { useLocation } from 'react-router-dom' const DevProfile = () => { const location = useLocation() const { dev } = location.state return (...) }Además, no estoy seguro de que la sintaxis que usó para Link sea válida o no. Pero compartiré la sintaxis que uso principalmente:
<Link to={`/dev/${dev._id}`} state={{ dev: dev }}>Si desea enviar accesorios a través del componente de enlace en React Router, debe usar el accesorio de estado en él. Y en el Componente navegado, accede a ese valor usando location.state. Y si desea usar literales de plantilla en su JSX (es decir, en <Link /> ), debe incrustarlos con JSX Embedded Expression. En su caso, su Solución es: <Link to={`/dev/${dev._id}`} state={{ dev: dev }}} . En el componente navegado, accede a este usando,
import {useLocation} from "react-router-dom" const DevProfile = () => { const location = useLocation(); const { dev } = location.state; // Your Logic }