React网页运行正常但显示空白，请求排查原因

问题根源 #

1. React Router v6 用法错误：v6版本中<Route>组件不再支持直接将JSX作为子元素传入，必须通过element属性传递要渲染的内容，否则路由无法正确渲染页面。
2. 路由参数获取方式不规范：Post组件直接通过window.location.pathname解析参数，不符合React Router的设计规范，可能导致参数获取失败或组件无法响应路由变化。

修复后的代码 #

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>
          {/* 使用element属性包裹要渲染的内容 */}
          <Route 
            path="/" 
            element={
              <>
                <h1>All Posts</h1>
                <ul>
                  {posts.map((post) => (
                    <li key={post.id}>
                      <Link to={`/posts/${post.id}`}>{post.title}</Link>
                    </li>
                  ))}
                </ul>
              </>
            } 
          />
          <Route path="/posts/:id" element={<Post />} />
        </Routes>
      </div>
    </Router>
  );
}

export default App;

Post.js

import { useState, useEffect } from "react";
import { useParams } from "react-router-dom"; // 导入useParams钩子
import axios from "axios";

function Post() {
  const [post, setPost] = useState(null);
  const { id } = useParams(); // 通过useParams获取路由参数

  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;

关键修复说明 #

• 对于<Route>组件，将原本直接嵌套的JSX内容放入element属性中，这是React Router v6的强制要求。
• 使用useParams钩子替代window.location获取路由参数，这是React Router提供的标准参数获取方式，能确保组件正确响应路由变化。

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