键入 React Router 路由器组件？使困惑

Posted 2023-02-21

【中文标题】键入 React Router 路由器组件？使困惑

【英文标题】：Typing React Router Router Component? Confused

【发布时间】：2018-04-10 07:22:36

【问题描述】：

我没有使用过 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 类。

【参考方案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:disable 的历史错误，所以谢谢你安装这些类型。

@cheussy 你是怎么解决的？

或者您可以像这样导入它：import BrowserRouter as Router from 'react-router-dom'; 它将为您处理历史记录。

【参考方案2】：

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

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

【参考方案3】：

按照 react-router 教程进行操作时，我犯了同样的“新手”错误：

import  Router  from 'react-router-dom';

...应该改为：

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