React Router Router Componentを入力していますか？混乱した

Question

私はReact Router v4を使用していないので、初心者のエラーが発生する可能性があります。私の問題は、Typescriptのコンパイルが、私が見ていないフードの下で返されている可能性のあるクラスがあると思われる場所で見たエラーで壊れていることです。

コード::

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; 

エラー::場合

(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; }'. 

は、私が何か間違ったことをやっているか、誰かがここで、それを見たいHomeRouteの一例です。しかし、私はこれが現時点では大きな問題ではないと思います。

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

私は何とかクラスを入力する必要が知っている、と私はどのようにナビゲーションクラスを入力しようとしていると良いの参照を把握することはできませんか。

Answer 1

あなたの<Router />要素に履歴を追加するのを忘れたと思います。

あなたが試すことができ：

import { createBrowserHistory } from 'history'; 

[...] 

const history = createBrowserHistory(); 

[...] 

class Navigation extends React.Component<RouterProps, {}> { 
    render(): JSX.Element { 
    return (
     <Router history={history}> 
     <div> 
      <ul className="nav-styles"> 
      [...] 
     </Router> 
    ); 
    } 
} 

あなたはそれが私はそれを固定し、私はtslintによって歴史エラーを無視してきた価値がある何のため

$ npm install --save-dev @types/history