在react-router中，this.context.router的类型是什么？

Question

为了设置上下文，我在 lesson 12 of react-router-tutorial 中，但随着我的跟进，我实际上是在 TypeScript 中做所有事情。在本教程的这一点上，在几个 React 组件中有一个名为 Repos

export class Repos extends React.Component<ReposProps, {}> { ... }

这是在 Router

中创建的

<Router history={browserHistory}>
    {/* ... */}
    <Route path="/repos" component={Repos}>{/* ... */}</Route>
    {/* ... */}
</Router>

Repos 中的某处是一个方法，它从 HTML 表单中获取一些参数并构建一个新路径以将浏览器定向到：

handleSubmit(event: React.FormEvent) {
    /* ... (define userName and repo vars) */
    const path = `/repos/${userName}/${repo}`
    this.context.router.push(path);
}

我的问题是最后一行的context和router是什么类型？

在the React documentation on Contexts I come to understand that context is generally defined in each element. It seems like a brilliant idea here would be to define context in Repos with an interface that extends from some interface defined in react-router's TypeScript type definitions

interface ReposContext extends Something /* ??? */ { }

在这里，Something 会将 router 定义为具有 push 方法的某种类型。

API doesn't say that Router has a method push although the Glossary 确实如此，这令人困惑。无论如何，DefinitelyTyped 上的类型定义没有在 Router 下定义 push 方法（虽然我不相信它们是完美的，但这个遗漏对我来说似乎不是偶然的）

同一个 API 确实指出了 RouterContext，其中提到了 context.router -- context.router 确实定义了 push() 以及许多其他方法。

然后我注意到 history.d.ts 在 react-router 的类型定义中，接口 History 具有所有相同的方法（加上更多

也许这个界面已经接近了。它没有像我想要的那样扩展任何东西（也许这是反应路由器类型改进的空间），但它有我需要的东西。

interface ContextRouter extends History { }

interface ReposContext {
    router: ContextRouter
}

我仍然持怀疑态度，因为尽管 ContextRouter 扩展了 History

并没有多大意义

Answer 1

我通过深入研究 react-router 代码解决了这个问题。通过弄清楚路由器是如何创建的，我最终在 match.js 发现路由器实际上是通过将历史传递给 createRouterObject 创建的，它只创建了一个与历史具有相同属性的对象以及一对其他属性。

路由器类型确实扩展了历史记录。

Answer 2

我用ReactRouter.RouterOnContext:

context: {
    router: ReactRouter.RouterOnContext
}

在react-router中，this.context.router的类型是什么？

In react-router, what is the type of this.context.router?

typescript

reactjs

react-router