Typing React Router Router Component? Confused

Question

I have not used React Router v4, so I could be making some novice errors. My issue is that Typescript compilation is breaking on an error that I've seen where I guess there is potentially a class that is being returned under the hood that I am not seeing?

Code ::

import * as React from 'react';
import { Router, RouteComponentProps } from 'react-router-dom';
import HomeRoute from './home';
import PhotosRoute from './photos';
import StoreRoute from './store';
import TourRoute from './tour';
import 'index.css';

interface RouterProps {
  component?: React.SFC<RouteComponentProps<any> | void> | React.ComponentClass<RouteComponentProps<any> | void>;
}

class Navigation extends React.Component<RouterProps, {}> {
  render(): JSX.Element {
    return (
       <Router>
        <div>
          <ul className="nav-styles">
           <li>
               <HomeRoute />
            </li>
            <li>
               <PhotosRoute />
            </li>
            <li>
               <StoreRoute />
            </li>
            <li>
                <TourRoute />
            </li>
          </ul>
        </div>
      </Router>
    );
  }
}

export default Navigation;

error ::

(16,8): error TS2322: Type '{ children: Element; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<Router> & Readonly<{ children?: ReactNode; }> & Re...'.
  Type '{ children: Element; }' is not assignable to type 'Readonly<RouterProps>'.
    Property 'history' is missing in type '{ children: Element; }'.

In case I am doing something wrong or someone wishes to see it, here is an example of HomeRoute. However I don't see this being the breaking issue at this time.

import * as React from 'react';
import { Route, Link } from 'react-router-dom';
import Home from '../Home/Home';

export default (): JSX.Element => (
  <div>
    <nav>
      <Link to="/">Home</Link>
    </nav>
    <div>
      <Route path="/" component={ Home } />
    </div>
  </div>
);

I know I need to type the class somehow, and I have been trying and can't figure out a good reference or how to type the Navigation class.

Answer 1

I made the same 'novice' error when following along the react-router tutorial:

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

...should instead be:

import { BrowserRouter as Router } from 'react-router-dom';