MERN栈博客项目点击Read More无法渲染单篇博客页面求助

我正在开发一个具备CRUD功能的MERN栈博客应用，目前已实现博客创建、存入数据库及列表渲染功能。但点击blogs.jsx中的Read More按钮后，跳转到/blogs/:id路由后页面无任何内容显示（包括Navbar），报错信息无法明确指向问题，尝试过ChatGPT提供的解决方案但无效。现将前后端关键代码片段附上，请求帮忙排查问题。

关键代码片段 #

前端路由配置（App.jsx）

import { Routes, Route } from 'react-router-dom';
import Navbar from './components/Navbar';
import Blogs from './components/Blogs';
import BlogDetail from './components/BlogDetail';
import CreateBlog from './components/CreateBlog';

function App() {
  return (
    <div className="App">
      <Navbar />
      <Routes>
        <Route path="/" element={<Blogs />} />
        <Route path="/create" element={<CreateBlog />} />
        <Route path="/blogs/:id" element={<BlogDetail />} />
      </Routes>
    </div>
  );
}

export default App;

博客列表页跳转逻辑（blogs.jsx）

import { Link } from 'react-router-dom';

const Blogs = ({ blogs }) => {
  return (
    <div className="blogs-list">
      {blogs.map(blog => (
        <div key={blog._id} className="blog-preview">
          <h2>{blog.title}</h2>
          <p>{blog.content.substring(0, 100)}...</p>
          <Link to={`/blogs/${blog._id}`}>Read More</Link>
        </div>
      ))}
    </div>
  );
};

export default Blogs;

博客详情组件（BlogDetail.jsx）

import { useParams, useEffect, useState } from 'react';
import axios from 'axios';

const BlogDetail = () => {
  const { id } = useParams();
  const [blog, setBlog] = useState(null);

  useEffect(() => {
    const fetchBlog = async () => {
      try {
        const res = await axios.get(`/api/blogs/${id}`);
        setBlog(res.data);
      } catch (err) {
        console.error(err);
      }
    };
    fetchBlog();
  }, [id]);

  if (!blog) return <div>Loading...</div>;

  return (
    <div className="blog-detail">
      <h2>{blog.title}</h2>
      <p>{blog.content}</p>
      <small>Created on: {new Date(blog.createdAt).toLocaleDateString()}</small>
    </div>
  );
};

export default BlogDetail;

后端博客接口（routes/blogs.js）

const express = require('express');
const router = express.Router();
const Blog = require('../models/Blog');

// Get single blog
router.get('/:id', async (req, res) => {
  try {
    const blog = await Blog.findById(req.params.id);
    if (!blog) {
      return res.status(404).json({ message: 'Blog not found' });
    }
    res.json(blog);
  } catch (err) {
    res.status(500).json({ message: err.message });
  }
});

module.exports = router;

排查方向 #

1. 路由匹配检查

   • 确认React Router版本：若使用v6+，确保路由包裹在<Routes>内，且path规则无冲突（比如没有提前匹配的通配符路由拦截/blogs/:id）。
   • 检查Navbar是否在路由外层渲染：确认Navbar组件是否放在<Routes>之外，确保所有路由页面都能显示导航栏。

2. ID传递与接口请求检查

   • 点击Read More前，确认blog._id是否存在且格式正确（MongoDB的ObjectId为24位字符串）。
   • 打开浏览器Network标签，查看/api/blogs/:id请求的状态码：
     • 404：检查后端接口路径是否正确（比如是否挂载在/api前缀下），或数据库中是否存在对应ID的博客。
     • 500：查看后端控制台报错，确认Blog模型定义是否正确，findById方法是否存在语法错误。

3. 组件渲染逻辑检查

   • 若页面显示空白而非"Loading..."，检查useParams()是否正确获取到ID：在BlogDetail组件中添加console.log(id)确认参数是否传递成功。
   • 确认axios请求的基地址是否配置正确：若前端和后端端口不同，需在axios中设置baseURL，或后端配置CORS允许跨域请求。

4. 控制台报错分析

   • 查看浏览器Console标签的报错信息：比如是否存在React渲染错误（如访问blog.title时blog为null）、CORS错误、或JS语法错误。

内容的提问来源于stack exchange，提问作者user17463009