使用 react-router-relay 类型扩展 react-router 模块

Question

默认的 react-router 就是这样使用的：

import * as React from 'react';
import { Router, Route, hashHistory } from 'react-router';

const routing = (
    <Router history={hashHistory}>
        <Route path="/login" component={Login}/>
    </Router>   
};

当我包含“react-router-relay”库时，它会向路由器添加功能。也就是说，它向路由器组件添加了 2 个属性（渲染和环境）：

import * as React from 'react';
import * as Relay from 'react-relay';
import * as useRelay from 'react-router-relay';
import { Router, Route, hashHistory, applyRouterMiddleware } from 'react-router';

const routing = (
    <Router history={hashHistory} render={applyRouterMiddleware(useRelay)} environment={Relay.Store}>
        <Route path="/login" component={Login}/>
    </Router>   
};

我将如何增加 react-router 类型？

我尝试了很多方法，最新的是：

import { Router } from 'react-router';

declare module 'react-router' {
    namespace Router {
        export interface RouterProps {
            environment?: any
        }
    }
}

因为我需要扩展命名空间“Router”和它下面的接口“RouteProps”。

链接到 React 路由器类型：https://www.npmjs.com/package/@types/react-router

React-router-relay 库本身没有任何类型。

我找到的关于这个主题的所有信息：

• https://github.com/Microsoft/TypeScript/issues/11034
• https://github.com/typings/typings/issues/611

• 所以问题似乎是反应类型永远不会导出命名空间 因此无法增强它们

Answer 1

试试这个

declare module 'react-router' { 
   interface RouterProps {
      environment?: any
      render?: any
   } 
}

它正在使用最新的 react-router 定义。

Answer 2

<Router history={hashHistory} render={applyRouterMiddleware(useRelay)} environment={Relay.Store}>
    <Route path="/login" component={Login}/>
</Router>   

看起来 login (component={Login}) 未导入。因此，它总是返回错误。