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

looks like your stuck if react doesn't export them, maybe open and issue on GH? — Nikos
– Nikos, Commented Dec 16, 2016 at 9:25
I did, github.com/DefinitelyTyped/DefinitelyTyped/issues/13291 — Peeter
– Peeter, Commented Dec 19, 2016 at 10:25

niba · Accepted Answer · 2017-09-19 12:21:16Z

1

Try this one

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

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

answered Sep 19, 2017 at 12:21

niba

2,9011 gold badge22 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

karthik · Accepted Answer · 2017-09-18 12:54:35Z

0

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

answered Sep 18, 2017 at 12:54

karthik

1,1089 silver badges22 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related