Augment react-router module with react-router-relay typings

问题

The default react-router is used as such:

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

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

When I include the "react-router-relay" library, it adds functionality to the Router. Namely it adds 2 properties to the Router component (render and environment):

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>   
};

How would I go about augmenting the react-router typings?

I've tried a bunch of approaches, latest being:

import { Router } from 'react-router';

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

As I need to extend the namespace "Router" and the interface "RouteProps" under it.

Link to React router typings: https://www.npmjs.com/package/@types/react-router

The React-router-relay library does not have any typings itself.

All of the information Ive found about this topic:

https://github.com/Microsoft/TypeScript/issues/11034
https://github.com/typings/typings/issues/611
so the problem seems to be that react typings don't ever export the namespaces so it becomes impossible to augment them

回答1:

Try this one

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

it's working with the latest react-router definitions.

回答2:

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

Looks like login (component={Login}) is not Imported.Hence, It always return an error.

来源：https://stackoverflow.com/questions/41103720/augment-react-router-module-with-react-router-relay-typings

标签

reactjs

typescript

relayjs

react-router-relay