デフォルトの 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」ライブラリを含めると、Router に機能が追加されます。つまり、Router コンポーネント (レンダリングと環境) に 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>
};
反応ルーターのタイピングを強化するにはどうすればよいですか?
私はたくさんのアプローチを試しましたが、最新のものは次のとおりです。
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
問題は、反応型付けが名前空間をエクスポートしないため、それらを拡張することが不可能になることです