如何在TypeScript中将React Router作为组件属性传入？

这确实是react-router + TypeScript组合里常见的类型困扰，我来帮你拆解下问题，再给你几个更顺畅的解决方案：

首先说你之前踩的坑：

• 用React.ComponentClass或者React.StatelessComponent太宽泛了，TypeScript没法约束这个组件必须是react-router的Router（毕竟任何组件都符合这个类型），而且也没法保证它能接受children props。
• 直接写BrowserRouter | MemoryRouter这种联合类型的话，TypeScript会做严格的类型交集检查——因为不同Router的props有差异（比如BrowserRouter有basename，MemoryRouter有initialEntries），它会要求你传入的props同时满足所有Router的要求，这显然不可能，所以会报错。
• 传JSX.Element的话，因为Element已经是渲染后的实例，不能直接像组件那样嵌套children，所以你用React.cloneElement来注入children的思路是完全可行的，而且可以优化下类型让它更安全。

优化你的cloneElement方案 #

你当前的代码可以把router的类型从JSX.Element改成更精确的React.ReactElement<RouterProps>，这样能确保传入的是符合react-router Router规范的元素：

import React from 'react';
import { RouterProps } from 'react-router-dom';

export interface TestProps {
  router: React.ReactElement<RouterProps>;
}

export class TestComponent extends React.Component<TestProps, any> {
  render() {
    const { router } = this.props;
    const children = (
      <div>
        {/* ...你的路由内容 */}
      </div>
    );
    // 这里cloneElement会保留原router的props，同时替换children
    return React.cloneElement(router, {}, children);
  }
}

更直接的组件传入方案（无需cloneElement） #

如果你只是想传入Router组件本身（而不是已经实例化的Element），可以用React.ComponentType<RouterProps>作为类型注解——因为所有react-router的Router组件（BrowserRouter、MemoryRouter等）的props都继承自RouterProps，这个类型能完美适配：

import React from 'react';
import { RouterProps, BrowserRouter, MemoryRouter } from 'react-router-dom';

export interface TestProps {
  Router: React.ComponentType<RouterProps>;
}

export class TestComponent extends React.Component<TestProps, any> {
  render() {
    const { Router } = this.props;
    return (
      <Router>
        <div>
          {/* ...你的路由内容 */}
        </div>
      </Router>
    );
  }
}

这样使用的时候，不管传BrowserRouter还是MemoryRouter都能通过TypeScript检查，比如：

// 生产环境用BrowserRouter
<TestComponent Router={BrowserRouter} />

// 测试环境用MemoryRouter
<TestComponent Router={MemoryRouter} />

两种方案各有适用场景：

• 如果你需要传入已经配置好自定义props的Router实例（比如带basename的BrowserRouter），用cloneElement方案更合适；
• 如果只是需要灵活切换Router组件类型，直接传组件本身的方案更简洁。

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