React博客站点帖子无法显示问题求助

开发React博客站点时，页面无法按照预期渲染帖子内容，实际显示仅为无样式的文本，与预期的卡片式布局不符。

核心代码 #

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

const posts = [
  {
    id: 1,
    title: "Lorem ipsum dolor sit amet consectetur adipisicing elit",
    desc: "Lorem ipsum dolor sit amet consectetur, adipisicing elit. Itaque eos, incidunt reiciendis dolorum cumque delectus natus iure commodi, asperiores iste tempore beatae modi sunt libero nobis adipisci dignissimos voluptatem. Atque.",
    img: "https://images.pexels.com/photos/7008010/pexels-photo-7008010.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2",
  },
  {
    id: 2,
    title: "Lorem ipsum dolor sit amet consectetur adipisicing elit",
    desc: "Lorem ipsum dolor sit amet consectetur, adipisicing elit. Itaque eos, incidunt reiciendis dolorum cumque delectus natus iure commodi, asperiores iste tempore beatae modi sunt libero nobis adipisci dignissimos voluptatem. Atque.",
    img: "https://images.pexels.com/photos/6489663/pexels-photo-6489663.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2",
  },
  {
    id: 3,
    title: "Lorem ipsum dolor sit amet consectetur adipisicing elit",
    desc: "Lorem ipsum dolor sit amet consectetur, adipisicing elit. Itaque eos, incidunt reiciendis dolorum cumque delectus natus iure commodi, asperiores iste tempore beatae modi sunt libero nobis adipisci dignissimos voluptatem. Atque.",
    img: "https://images.pexels.com/photos/4230630/pexels-photo-4230630.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2",
  },
  {
    id: 4,
    title: "Lorem ipsum dolor sit amet consectetur adipisicing elit",
    desc: "Lorem ipsum dolor sit amet consectetur, adipisicing elit. Itaque eos, incidunt reiciendis dolorum cumque delectus natus iure commodi, asperiores iste tempore beatae modi sunt libero nobis adipisci dignissimos voluptatem. Atque.",
    img: "https://images.pexels.com/photos/6157049/pexels-photo-6157049.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2",
  },
];

const Home = () => {
  return (
    <div className="home">
      <div className="posts">
        {posts.map((post) => (
          <div className="post" key={post.id}>
            <div className="img">
              <img src={post.img} alt="" />
            </div>
            <div className="content">
              <Link className="link" to={`/post/${post.id}`}>
                <h1>{post.title}</h1>
              </Link>
              <p>{post.desc}</p>
              <button>Read More</button>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
};

export default Home;

效果对比 #

• 实际显示：
  

• 预期显示：
  

问题排查与修复方案 #

1. 缺失CSS样式（最可能原因） #

从实际效果看，帖子没有布局样式，大概率是未导入对应CSS文件或样式未正确编写：

• 检查是否存在Home.css文件，若存在需在Home.jsx顶部导入：

import './Home.css';

• 编写基础布局样式示例，可直接复制使用：

.home {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem;
}
.posts {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 2rem;
}
.post {
  border: 1px solid #eee;
  border-radius: 8px;
  overflow: hidden;
  transition: box-shadow 0.2s ease;
}
.post:hover {
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.post .img img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}
.post .content {
  padding: 1.5rem;
}
.post .content h1 {
  font-size: 1.2rem;
  margin-bottom: 0.8rem;
  color: #333;
}
.post .content p {
  color: #666;
  font-size: 0.9rem;
  line-height: 1.5;
  margin-bottom: 1.2rem;
}
.post .content button {
  background-color: #007bff;
  color: white;
  border: none;
  padding: 0.6rem 1.2rem;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.9rem;
}
.post .content button:hover {
  background-color: #0056b3;
}

2. 路由配置验证 #

确认react-router-dom的路由配置是否正确：

• 检查App.js或路由文件中是否正确挂载Home组件，并配置/post/:id路由：

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Home from './Home';
import Post from './Post'; // 需确保Post组件已创建

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/post/:id" element={<Post />} />
      </Routes>
    </Router>
  );
}

export default App;

3. 其他检查点 #

• 验证图片链接是否可访问：代码中使用的Pexels图片链接均有效，可直接访问
• 确认posts数组遍历逻辑：代码中使用map遍历并设置了唯一key（post.id），逻辑正确

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