reactjs - exact - react router tutorial

Aumentar el módulo de reacción-enrutador con typings react-router-relay

Question

El router de reacción predeterminado se usa como tal:

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

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

Cuando incluyo la biblioteca "reaccionar-enrutador-relevo", agrega funcionalidad al enrutador. A saber, agrega 2 propiedades al componente del enrutador (procesamiento y entorno):

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

¿Cómo voy a aumentar las tipificaciones del router de reacción?

He intentado un montón de enfoques, siendo el último:

import { Router } from ''react-router'';

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

Como necesito ampliar el espacio de nombres "Enrutador" y la interfaz "RouteProps" debajo de él.

Enlace a typings del enrutador React: https://www.npmjs.com/package/@types/react-router

La biblioteca React-router-relay no tiene ningún typings en sí mismo.

Toda la información que he encontrado sobre este tema:

• https://github.com/Microsoft/TypeScript/issues/11034
• https://github.com/typings/typings/issues/611

• así que el problema parece ser que los tipings de reacción no exportan los espacios de nombres, por lo que es imposible aumentarlos

Answer 1

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

Parece que el inicio de sesión (component = {Login}) no se ha importado. Por lo tanto, siempre devuelve un error.

Answer 2

Prueba este

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

está trabajando con las últimas definiciones de router de reacción.