입력 라우터 라우터 구성 요소? 혼동

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

당신은 그것을 내가 그것을 고정 가치가 무엇인지를 들어

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