diff --git a/types/react-router/index.d.ts b/types/react-router/index.d.ts index 72afa50e3b..5d97ebb71f 100644 --- a/types/react-router/index.d.ts +++ b/types/react-router/index.d.ts @@ -71,7 +71,7 @@ export interface RouteProps { exact?: boolean; strict?: boolean; } -export class Route extends React.Component { } +export class Route extends React.Component { } export interface RouterProps { history: any; diff --git a/types/react-router/test/InheritingRoute.tsx b/types/react-router/test/InheritingRoute.tsx new file mode 100644 index 0000000000..47f6e8f8c1 --- /dev/null +++ b/types/react-router/test/InheritingRoute.tsx @@ -0,0 +1,16 @@ +import * as React from 'react'; +import { Route, RouteProps } from 'react-router'; + +interface CustomRouteInterface extends RouteProps { + aProperty: string; + anotherOne: boolean; + willItEnd?: number; +} + +// React advocates composition over inheritance, but doesn't prevent us from using it +export default class CustomRoute extends Route { + render() { + const maybeElement = super.render(); + return maybeElement &&
{React.cloneElement(maybeElement, this.props)}
; + } +} diff --git a/types/react-router/tsconfig.json b/types/react-router/tsconfig.json index 438e3c9647..7e6466a83c 100644 --- a/types/react-router/tsconfig.json +++ b/types/react-router/tsconfig.json @@ -33,6 +33,7 @@ "test/NavigateWithContext.tsx", "test/MemoryRouter.tsx", "test/Switch.tsx", + "test/InheritingRoute.tsx", "test/WithRouter.tsx" ] }