使用TypeScript动态添加React Router路由时出现TS2739错误

错误原因 #

报错Type '{ children: Element[]; }' is missing the following properties from type 'RouterProps': location, navigator的核心原因有两个：

1. Router是React Router的底层组件，必须手动传入location和navigator属性才能运行，但你已经使用了BrowserRouter——这是封装好的高层路由容器，已经内置了location和navigator的管理逻辑，嵌套Router属于重复且错误的用法。
2. React Router v6强制要求所有Route组件必须包裹在Routes组件内部，你的代码缺少这个必要结构。

解决方案 #

1. 修改App组件代码 #

移除多余的Router组件，添加Routes包裹动态生成的Route：

import { ModuleProps } from '@stonehenge-props/api-interfaces';
import { FC } from 'react';
import { BrowserRouter, Route, Routes } from 'react-router-dom'; // 移除Router导入
import allModules from './modules';

export const App: FC = () => { // 无需RouterProps类型，App组件不接收路由相关props
  return (
    <BrowserRouter>
      <Routes> {/* 必须用Routes包裹所有Route */}
        {allModules.map((m: ModuleProps) => {
          return <Route path={m.routeProps.path} element={m.routeProps.element} key={m.name} />;
        })}
      </Routes>
    </BrowserRouter>
  );
};

export default App;

2. （可选）优化Login模块的类型规范 #

为了避免类型隐式推断问题，明确指定模块的类型：

import { FC } from 'react';
import { ModuleProps } from '@stonehenge-props/api-interfaces';

const Login: FC = () => {
  return <div>Login</div>;
};

// 明确标注类型，增强代码健壮性
const LoginModule: ModuleProps = {
  name: 'Login',
  routeProps: { path: '/login', element: <Login /> },
};

export default LoginModule;

修改说明 #

• 移除Router组件及相关导入：BrowserRouter已经提供了完整的路由上下文，无需重复嵌套底层Router。
• 添加Routes组件：这是React Router v6的强制要求，负责路由匹配逻辑的管理。
• 移除App组件的RouterProps泛型：App组件本身不需要接收路由属性，无需声明该类型。

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