React Route render属性不渲染组件及element传参报错求助

问题根源 #

你的代码是React Router v5的写法，但大概率在用v6版本——v6彻底移除了render属性，也不再通过组件props传递match、location这类路由对象，所以两种写法都会出问题：

• 用render属性的Route：v6不识别该属性，组件自然无法渲染
• 用element属性的Route：v6不再给组件传props.match，读取props.match.params.id就会报undefined错误

解决步骤 #

1. 统一使用React Router v6语法 #

v6里定义路由只能用element属性，路由参数通过钩子函数获取，不再依赖props传递。

2. 修改Post组件代码 #

需要导入v6的两个核心API：useParams（获取路由参数）和Navigate（替代v5的Redirect做页面跳转），然后调整逻辑：

import { useParams, Navigate } from 'react-router-dom';

// postlist假设是父组件传入的props，全局数据可直接导入
const Post = ({ postlist }) => {
  // 用useParams获取路由参数id
  const { id } = useParams();
  const validId = parseInt(id);

  // id无效时跳转到404
  if (!validId) {
    return <Navigate to="/404" />;
  }

  const fetchedPost = {};
  let postExists = false;
  postlist.forEach((post) => {
    if (validId === post.id) {
      fetchedPost.title = post.title ?? "No title given";
      fetchedPost.date = post.date ?? "No date given";
      fetchedPost.author = post.author ?? "No author given";
      fetchedPost.content = post.content ?? "No content given";
      postExists = true;
    }
  });

  // 文章不存在也跳转404
  if (!postExists) {
    return <Navigate to="/404" />;
  }

  // 渲染文章内容
  return (
    <div className="post-container">
      <h1>{fetchedPost.title}</h1>
      <p className="post-meta">作者：{fetchedPost.author} | 发布时间：{fetchedPost.date}</p>
      <div className="post-content">
        {fetchedPost.content}
      </div>
    </div>
  );
};

export default Post;

3. 路由配置写法 #

确保路由用v6的element属性，同时把postlist传递给Post组件：

import { Routes, Route } from 'react-router-dom';
import Post from './components/Post';
import postlist from './data/postlist';

function AppRouter() {
  return (
    <Routes>
      {/* 其他路由配置 */}
      <Route exact path="/post/:id" element={<Post postlist={postlist} />} />
      <Route path="/404" element={<div className="page-404">404 - 页面不存在</div>} />
    </Routes>
  );
}

额外提示 #

• 若坚持用v5写法，需回退React Router版本到v5.x（不推荐，v6是官方主推的新版本）
• 代码里的??是空值合并运算符，比传统三元判断更精准，仅在值为null/undefined时启用默认值

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