HTML 没有出现在 React 网页上 [重复]

Question

所以正如标题所暗示的，我正在寻找为什么我的网页没有出现在网站上的原因

这里是 App.js 文件

import { useState, useEffect } from "react";
import { BrowserRouter as Router, Routes, Route, Link } from "react-router-dom";
import axios from "axios";
import Post from "./Post.js";

function App() {
  const [posts, setPosts] = useState([]);

  useEffect(() => {
    axios.get("https://jsonplaceholder.typicode.com/posts").then((response) => {
      setPosts(response.data);
    });
  }, []);

  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">All Posts</Link>
            </li>
          </ul>
        </nav>

        <Routes>
          <Route path="/" exact>
            <h1>All Posts</h1>
            <ul>
              {posts.map((post) => (
                <li key={post.id}>
                  <Link to={`/posts/${post.id}`}>{post.title}</Link>
                </li>
              ))}
            </ul>
          </Route>
          <Route path="/posts/:id">
            <Post />
          </Route>
        </Routes>
      </div>
    </Router>
  );
}

export default App;

我把 Post.js 做成一个独立于 App 的 js 文件，像这样：

import { useState, useEffect } from "react";

import axios from "axios";

function Post() {
    const [post, setPost] = useState(null);
    const id = window.location.pathname.split("/")[2];
  
    useEffect(() => {
      axios.get(`https://jsonplaceholder.typicode.com/posts/${id}`).then((response) => {
        setPost(response.data);
      });
    }, [id]);
  
    if (!post) {
      return <div>Loading...</div>;
    }
  
    return (
      <div>
        <h1>{post.title}</h1>
        <p>{post.body}</p>
      </div>
    );
  }

export default Post;
  

网站也在运行。我可以访问那里的所有内容，但由于某种原因，它只是一个空白页面。 我希望你能帮我解决这个问题。谢谢

Answer 1

不能直接把要渲染的内容放在

<Route>

下。相反，在

element

.

 上设置 

<Route>

属性

例如：

<Route path="/posts/:id" element={<Post/>}/>

您还需要将所有帖子的内容提取到一个单独的组件中。

<Route path="/" element={<AllPosts/>}>