16

デフォルトの 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 ライブラリには、型付け自体はありません。

このトピックについて見つけたすべての情報:

4

2 に答える 2