reactjs - 如何使用Typescript将组件传递到React-Router路由中？

当我将一些组件传递给Route组件时，会出现ts编译器错误：
类型{main:typeof maincomponent；侧边栏：typeof sidebarcomponent；}不能分配给类型“routecomponents”。
属性“边栏”与索引签名不兼容。
类型“typeof sidebarcomponent”不能分配给类型“reacttype”。
类型“typeof sidebarcomponent”不能分配给类型“statelectcomponent”。
类型“SouthBar组件”不提供签名匹配（道具：任何，上下文？：any）：反应元素'
我试图正确地构造一个RouteComponents对象，但是我不得不修改react-router的index.d.ts来导出RouteComponents定义，因为只有RouteComponent被导出，而且它仍然不喜欢这个表达式。在哪里可以找到RouteComponents对象的外观？
下面是一个简单的文件：

import * as React from 'react'
import { IndexRoute, Route } from 'react-router'

import App from './components/App'
import MainComponent from './components/MainComponent'
import OtherMainComponent from './components/OtherMainComponent'
import SidebarComponent from './components/SidebarComponent'

const routes = () => {
  return (
    <Route path="/" component={App}>
      <IndexRoute components={{ main: MainComponent, sidebar: SidebarComponent }} />
      <Route path="/add" components={{ main: OtherMainComponent, sidebar: SidebarComponent }} />
    </Route>
  )
}

export default routes

正如我所提到的，我也试过以下方法：

const indexRouteComponents: RouteComponents = {
  main: MainComponent,
  sidebar: SidebarComponent
}

const routes = () => {
  return (
    <Route path="/" component={App}>
      <IndexRoute components={indexRouteComponents} />
      <Route path="/add" components={{ main: OtherMainComponent, sidebar: SidebarComponent }} />
    </Route>
  )
}

routes.tsx部分没有错误，但是创建components={indexRouteComponents}对象是一个错误（与上面相同的错误，因为它不是正确的indexRouteComponents对象）
使用typescript设置RouteComponents组件的正确方法是什么？
编辑：以下是与此相关的GitHub问题：
https://github.com/ReactTraining/react-router/issues/4317
https://github.com/DefinitelyTyped/DefinitelyTyped/issues/13689

最佳答案

const AppRouter = [
{
    main: MainComponent,
    exact: true,
    path: "/",
    sidebar: SidebarComponent,
},
{
    main: OtherMainComponent,
    exact: true,
    path: "/add",
    sidebar: SidebarComponent,
}

；
在你的主要部分：

public render() {
    return (
        <Router>
           <div className={"sidebar"}>
               {AppRouter.map((route, index) => (
                <Route
                    key={index}
                    path={route.path}
                    exact={route.exact}
                    component={route.sidebar}
                />
            ))}
            </div>
            <div className={"content"}>
                {AppRouter.map((route, index) => (
                <Route
                    key={index}
                    path={route.path}
                    exact={route.exact}
                    component={route.main}
                />
            ))}
            </div>
        </Router>
    )
}