从API获取新闻头条并实现组件传参时遇到React Router Dom无RouteComponentProps导出成员的问题求助

你在开发新闻头条功能时遇到的Module '"react-router-dom"' has no exported member 'RouteComponentProps'错误，核心原因是react-router-dom v6版本已经移除了RouteComponentProps这个类型——它不再支持通过组件props传递路由相关信息，而是换成了基于Hooks的API来实现。

问题根源 #

在react-router-dom v5及更早版本中，我们会用RouteComponentProps给组件props做类型标注，以此获取location、history等路由属性。但v6重构了路由体系，废弃了这种方式，转而推荐使用useLocation、useNavigate、useParams等Hooks来获取路由数据。

修复方案 #

你只需要修改Details组件的代码，用useLocation Hook替代RouteComponentProps即可：

import React from "react";
// 引入useLocation替代RouteComponentProps
import { useLocation } from "react-router-dom";
import { InitPost } from "./Home";

const Details: React.FC = () => {
  // 通过useLocation获取路由location对象
  const location = useLocation();
  // 给state指定InitPost类型，避免使用any
  const post = location.state as InitPost;
  
  return (
    <div>
      <pre>{JSON.stringify(post, null, 2)}</pre>
    </div>
  );
};

export default Details;

补充说明 #

• 你的Home组件代码不需要修改，navigate("/details", { state: post })的传参方式在v6中是完全有效的。
• 如果后续需要获取URL动态参数（比如/details/:id这类路由的参数），可以使用useParams Hook；如果需要页面导航功能，用useNavigate即可，这些都是v6中替代旧API的标准方案。

内容的提问来源于stack exchange，提问作者Mohammad Miskatur Rahman