React Router Dom v6报错：无导出成员RouteComponentProps

React Router Dom 6 已移除 RouteComponentProps 这个导出成员，直接导入会触发「Module 'react-router-dom' has no exported member 'RouteComponentProps'」错误。以下是针对你的代码的修复方案：

推荐方案：使用 useParams 钩子 #

这是 React Router Dom 6 官方推荐的方式，通过钩子直接获取路由参数，代码更简洁：

1. 移除 RouteComponentProps 的导入语句
2. 引入 useParams 钩子
3. 在组件内部获取路由参数，替换原来的 match.params

修改后的完整代码片段 #

import React, { useEffect, useState } from 'react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faClock } from '@fortawesome/free-solid-svg-icons';
import { Col, Row, Badge } from 'react-bootstrap';
import Alert from 'react-bootstrap/Alert';
import IRestaurant from '../../models/IRestaurants';
import { LoadingStatus } from '../../models/types';
import LoadingIndicator from '../common/LoadingIndicator';
import Rating from '../common/Rating';
// 引入useParams钩子，移除RouteComponentProps
import { useParams } from 'react-router-dom';

import { getRestaurantById } from '../../services/restaurants';
import Menu from '../menu/Menu';

const RestaurantDetails = () => {
   // 获取路由参数，并指定类型
   const { id } = useParams<{ id: string }>();

   const [status, setStatus] = useState<LoadingStatus>("LOADING");
   const [restaurant, setRestaurant] = useState<IRestaurant | null>(null);
   const [error, setError] = useState<Error | null>(null);

   useEffect(() => {
       const fetchRestaurant = async () => {
           try {
               // 直接使用id参数，添加非空断言（或根据业务逻辑做空值处理）
               const data = await getRestaurantById(+id!);
               setRestaurant(data);
               setStatus("LOADED")
           } catch (error: any) {
               setError(error);
               setStatus("ERROR_LOADING");
           }
       };
       fetchRestaurant();
   }, [id]); // 依赖项加入id，路由参数变化时重新请求
};

关键说明 #

• React Router Dom 6 弃用了 v5 中通过 RouteComponentProps 传递路由信息的方式，转而使用一系列路由钩子（useParams、useNavigate、useLocation 等）
• useParams<T>() 可通过泛型指定参数类型，确保类型安全
• 路由参数可能为 undefined，可根据业务场景添加空值判断，或用 ! 做非空断言

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