鍵入反應路由器路由器組件？困惑

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