1

I'm trying to pass an id through state in a react router v6 link, because I need it in another components that uses that specific ID to make an GET request.

This is the code where the Link is.

import React from "react"
import { Link } from "react-router-dom";

const Post = ({id, title}) => {
    return (
         <div key={id} className="col-sm-12 col-lg-6 d-flex justify-content-center">
                <div className="card d-flex">
                    <h3 className="card-title">{title}</h3>
                    <Link 
                    to="/PostDetail" 
                    state= {id}
                    >
                    Detalles</Link>
                </div>
        </div>
    )
}

export default Post;

This is where the link navigates to (the link works, but the state is undefined)

import React, {useState, useEffect} from "react"
import { useLocation } from "react-router";

const PostDetail = () => {
    const [post, setPost] = useState([]);
    const [loading, setLoading] = useState(true);
    const location = useLocation();
    const id = location.state;
    const url = `https://jsonplaceholder.typicode.com/posts/${id}`

    const getPostDetail = async () => {
        fetch(url)
        .then((res)=>{
            res.json()
        })
        .then((res)=>{
            console.log(res)
            setLoading(false)
        })
        .catch(e=>console.log(e))
    }

    useEffect(()=>{
        getPostDetail();
    }, [])

    return (
        <div>
            <h1>hola</h1>
        {loading ? <h3>loading...</h3> : <div>{post}</div>}
        </div>
    )
}

export default PostDetail;

The "id" is correct in the "Post" component, I have checked already. The routing is not the issue, since the Links redirects correctly to "PostDetail" and the "loading..." text appears, but then it disappears and the console shows https://jsonplaceholder.typicode.com/posts/[object Object]

Amadeo de la Peña
  • 51
  • 7
  • Please share any debugging steps taken. Have you verified that `id` is what you expect in `Post`? – Brian Thompson Nov 22 '21 at 16:46
  • 1
    In RRDv6 the route state is a top-level prop, not a property nested in the `to` prop. – Drew Reese Nov 22 '21 at 16:47
  • Yes, ID is correct in Post. It still returns undefined when putting state as a top-level prop – Amadeo de la Peña Nov 22 '21 at 17:10
  • Can you update question to include the router and routes? A *running* codesandbox that reproduces the issue we can inspect and debug live might also be helpful. – Drew Reese Nov 22 '21 at 17:23
  • I have updated the question with some modifications but the issue is still not solved. The routing is not the problem since the Link redirects correctly where it should. – Amadeo de la Peña Nov 22 '21 at 17:41
  • *The routing is not the problem since the Link redirects correctly where it should* - that doesn't really mean anything since the problem is with your state object (which by the way, is not an object in how you're currently passing it) – Brian Thompson Nov 22 '21 at 18:02

0 Answers0