与react中单个博客的内容连接

Question

我一直在努力通过"阅读更多"；按钮我已经能够成功地连接到contentful并在页面上显示我的所有博客，但每当我点击按钮显示单个博客时，它就会显示404错误页面与单个博客文章的内容。每次我选择"阅读更多"按钮时，URL段塞都会正确显示，因此它"告诉"我路由正在工作。有人能帮我在一个博客页面上告诉我我的代码做错了什么吗？非常感谢！！

所有博客代码：

import React, {useState, useEffect, useCallback} from "react";
import {client} from '../../../Client'
const Content = () => {
const [blogPosts, setBlogPosts]= useState([])
const cleanBlogPosts = useCallback((rawData) => {
const cleanBlogPosts= rawData.map((posts) => {
const {sys, fields}= posts
const {id} = sys
const blogTitle = fields.title
const blogImage = fields.featuredImage.fields.file.url
const blogDescription = fields.description
const blogBody = fields.body
const slug = fields.slug
const updatedPosts = {id, blogTitle, blogImage, blogDescription, blogBody, slug}
return updatedPosts
})
setBlogPosts(cleanBlogPosts)
}, [])
const getBlogPosts = useCallback( async()=>{
try{
const response = await client.getEntries({content_type: 'blogPost', order: 'sys.createdAt'})
const responseData = response.items
if(responseData){
cleanBlogPosts(responseData)
}else{
setBlogPosts([])
}
} catch(error){
console.log(error)
}
}, [cleanBlogPosts])
useEffect(()=>{
getBlogPosts()
},[getBlogPosts])
console.log(blogPosts)
return (
<>
<main id="body-content">
<header className="wide-mt-0 blogsHeader">
<div >
<img src="images/banner_2.jpg" className="img-fluid blogimg d-block w-100 h-100 p-0" alt=""/>
</div>
</header>
<section className="wide-tb-5 pb-5">
<div ><h1 className="blogh1 my-5 display-5" align="center">Our Blog</h1></div>
<hr className="w-75"/>
</section>
</main>
<div className="container" id="blogContainer">
{blogPosts.map((item)=> {

const { id, slug, blogTitle, blogDescription, blogBody, blogImage, index }= item
return (
<div key ={index} className="card">
<img src={blogImage} alt="" className="card-img-top rounded img-thumbnail" />

<h4 className="card-title h4-md mb-3" align="center"><a href={`/blogsingle/${slug}`}>{blogTitle}</a></h4>
<p className="card-text">{blogDescription}</p>
<a href={`/blogsingle/${slug}`}className="btn btn-primary btn-theme bg-navy-blue no-shadow">Read More <i className="icofont-rounded-right"></i></a>
</div>



)
})}
</div>
</>
);
};
export default Content;

这是单个博客代码：(点击所有博客页面上的按钮时不显示相应的单个博客(

import {React, useEffect, useState, useCallback} from "react";
import {client} from '../../../Client'
const Content = () => {
const [singleBlog, setSingleBlog] = useState([])
const cleanSingleBlog = useCallback((rawData) => {
const cleanSingleBlog = rawData.map((post) => {
const {sys, fields} = post
const {id} = sys
const slug = fields.slug
const blogTitle = fields.title
const blogImage = fields.featuredImage.fields.file.url
const blogDescription = fields.description
const blogBody = fields.body
const updateSingleBlog = {id, blogTitle, blogImage, blogDescription, blogBody, slug}
return updateSingleBlog
})
setSingleBlog(cleanSingleBlog)
}, [])

const getSingleBlog = useCallback (async (slug) => {
try {
const response = await client.getEntries(
{content_type: 'blogPost',
'fields.slug' : slug
})
const responseData = response.items
if(responseData) {
cleanSingleBlog(responseData)
}else{
setSingleBlog([])
}
}catch(error) {
console.log(error)
}
}, [cleanSingleBlog])
useEffect(() => {
getSingleBlog()
}, [getSingleBlog])
console.log(singleBlog)
return (
<>
<main id="body-content">
<header className="mt-5">
</header>
</main>
<div className="container">
{singleBlog.map((item) => {
const { id, slug, blogTitle, blogImage, blogDescription, blogBody} = item
return(
<div  key = {id} >
<img src={blogImage} alt="" className="rounded mb-4" />

<h4 className="h4-md mb-3 fw-7 txt-blue" align="center">{blogTitle}</h4>
<p>{blogDescription}</p>
<p>{blogBody}</p>

</div>

)

})}

</div>           

</>
);
};
export default Content;

Answer 1

在cleanSingleBlog中对单个帖子使用getEntry('id'(然后进行映射不起作用，因为您得到的是对象而不是数组。