键入反应路由器路由器组件？困惑

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