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

我知道我需要以某种方式键入这个类，但我一直在尝试，但找不到一个好的引用或如何键入Navigation类。

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

Answer 2

在遵循react-router教程时，我也犯了同样的“新手”错误：

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

...should应该是：

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

Answer 3

Router是更高层路由器[1]的基本接口。它需要注入历史作为编译的道具。根据您的生产环境，我建议使用BrowserRouter或NativeRouter。

https://reacttraining.com/react-router/web/api/Router1