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

Question

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

Musa

looks like your stuck if react doesn't export them, maybe open and issue on GH? – Maurreen

I did, github.com/DefinitelyTyped/DefinitelyTyped/issues/13291 – Musa

Answer 1

Try this one

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

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

Galsworthy

Answer 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.

Emit