Este es mi código que quiero mostrar Mi blog en esta página:

 import axios from "axios"; import React, { useEffect,useState }from "react"; import Footer from "../../src/components/Footer" import Header from "../../src/components/Header"; import { useParams } from 'react-router-dom'; export default function BlogPreview(props) { let obj ={ title: "", description: "", urlToImage: "", } let url = axios.post('/API',obj) const { id } = useParams(); const [blog, setBlog] = useState(null); useEffect(() => { let blog = url.data.find((blog) =>blog.id === parseInt(id)); if (blog) { setBlog(blog); console.log(blog); }

}, [objetivo]);

volver (<>

 <div className="container-fluid py-5"> <div className="col-6 BlogPreviewBox px-5 "> <div className="d-flex justify-content-center"> <img className="display-blog-box my-5" src="/" src={blog.urlToImage}></img> </div> <h1 className="blog-preview-heading"> {blog.title} </h1> <div className="d-flex flex-column align-items-center"> <span className="text-center py-3">07 December 2021</span> <button className="btn-blog-display">2 min read</button> </div> </div> <div className="row display-blog-content-row"> <p>{blog.description}</p> </div> </div> <Footer/> </>

) }

Quiero saber cómo hacerlo usando Blog _id aquí Extraigo _id pero no funciona, se puede ver en el siguiente código:

 <Link href={`/Blogs/BlogPreview/${id}`} > <button className="btn-blog-display">2 min read</button> </Link>

Resuelva este problema creando un código de ejemplo. Estuve atascado aquí durante 2 semanas, pero no puedo ver una solución a este problema. Espero que alguien me resuelva este problema.