react-router中，this.context.router的类型是什么? [英] In react-router, what is the type of this.context.router?

问题描述

要设置上下文，我在 react-router-tutorial 的第 12 课，但随着我的学习，我实际上正在用 TypeScript 做所有事情.在本教程的这一点上，几个 React 组件中有一个叫做 Repos

To set the context, I am in lesson 12 of react-router-tutorial, but as I'm following along, I'm actually doing everything in TypeScript. At this point in the tutorial, among several React components is one called Repos

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

它是在 Router

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

Repos 中的某处是一个方法，它从 HTML 表单中获取一些参数并构造一个新的路径来引导浏览器:

Somewhere in Repos is a method that takes some arguments from an HTML form and constructs a new path to direct the browser to:

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

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

My question is what is the type of context and router on the last line?

在 关于上下文的 React 文档中，我开始理解上下文通常是在每个元素中定义.在 Repos 中定义 context 似乎是一个绝妙的主意，该接口从 react-router 的 TypeScript 类型定义

In 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 方法的某种类型.

Here, Something would have router defined as some type that has the push method.

API 没有说Router 有一个方法 push 尽管 Glossary 确实如此，这令人困惑.无论如何，DefinitelyTyped 上的类型定义没有定义 Router 下的 push 方法(虽然我不相信它们是完美的，但对我来说这种遗漏并不是偶然的)

The API doesn't say that Router has a method push although the Glossary does, which is confusing. Regardless, the type definitions on DefinitelyTyped do not define a push method under Router (while I don't believe they are perfect, this omission does not seem accidental to me)

同样的 API 确实指出了 RouterContext 其中提到了 context.router -- context.router 确实定义了 push() 以及一些其他方法.

That same API does point out RouterContext which mentions context.router -- context.router does define push() as well as a number of other methods.

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

Well then I noticed in history.d.ts in react-router's type definitions, the interface History has all the same methods (plus a couple more

也许这个界面会越来越近.它没有像我想要的那样扩展任何东西(也许这是 react-router 类型改进的空间)，但它有我需要的东西.

Maybe this interface is getting close then. It's not extending anything as I had wanted it to (maybe this is room for the react-router typings to improve), but it has what I need.

interface ContextRouter extends History { }

interface ReposContext {
    router: ContextRouter
}

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

I'm still doubtful because it doesn't quite make sense though that ContextRouter extends History

推荐答案

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

I have figured this one out by diving into the react-router code. By figuring out how the router is created, I ended up in match.js where I discovered that the router is in fact created by passing history to createRouterObject which just creates an object with the same properties as the history as well as a couple of other properties.

路由器的类型确实扩展了历史.

这篇关于react-router中，this.context.router的类型是什么?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！