Question

我刚刚开始使用React Router v4，无法管理Browserrouter的历史记录。例如，当我尝试访问this.props.history.push("/")时出现错误：

TS2339: Property 'history' does not exist on type 'Readonly<{ children?: ReactNode; }> & Readonly<{}>'

我正在将React Router v4与Browserrouter一起使用，并将React与Typescript一起使用。看来来自React Router的Route的三个道具（位置，历史，比赛）没有传递给它的组件。 我在Typescript或React Router上有什么问题吗？

index.tsx

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'bootstrap/dist/css/bootstrap.min.css';
import './index.css';
import {
    BrowserRouter as Router, Route
} from 'react-router-dom';
import Login from "./Login";
import Questionnaire from "./Questionnaire";
import Registration from "./Registration";
import NotFound from "./NotFound";
import GotNoHistory from "./GotNoHistory";
import registerServiceWorker from './registerServiceWorker';

ReactDOM.render(
    <Router>
        <Route exact={true} path="/" component={Questionnaire}/>
        <Route path="/login" component={Login}/>
        <Route path="/registration" component={Registration}/>
        <Route path="/gotNoHistory" component={GotNoHistory} />
        <Route component={NotFound}/>
    </Router>,
    document.getElementById('reactApp')
);

registerServiceWorker（）;

示例组件GotNoHistory.tsx

import * as React from 'react';
import './index.css';

class GotNoHistory extends React.Component {

    render() {
        return <div>{this.props.history.push("/")}</div>;
    }
}

export default GotNoHistory;

更新

我发现了 RouteComponentProps 。我将此道具添加到我的课程 GotNoHistory 中，错误消失了。那是解决问题的正确方法吗？

import {RouteComponentProps} from 'react-router';
class GotNoHistory extends React.Component<RouteComponentProps<any>, any> {
    render() {
        return <div>Go back {this.props.history.push("/")}</div>;
    }
}

更新Chris解决方案

import * as React from 'react';
import './index.css';
import {Route} from "react-router-dom";

interface Props {
}

interface State {
}

export default class GotNoHistory extends React.Component<Props & Route, State> {
    render() {
        return this.props.history.push("/");
    }
}

导致几乎相同的错误：TS2339: Property 'history' does not exist on type 'Readonly<{ children?: ReactNode; }> & Readonly<{Props & Route<RouteProps>}>'

Answer 1

自己解决。

我的解决方案是将路线道具添加到道具的类型中。

import {RouteComponentProps} from 'react-router';
class GotNoHistory extends React.Component<RouteComponentProps<any>> {
    render() {
        return <div>Go back {this.props.history.push("/")}</div>;
    }
}

对于像我之前这样不知道的人来说，<RouteComponentProps<any>>意味着什么：

该参数为prop类型。因此，在React.Component之前，这意味着我们不会期望路由器提供任何道具。所以这行不通！

Answer 2

您应该可以在路线组件中访问它，但是需要让Typescript知道您希望它们作为道具：

import { Route, Redirect } from 'react-router-dom'
import React from 'react'


interface IProps {
}

interface IState {
}

export default class GotNoHistory extends React.Component<IProps & Route, IState> {
  render() {
      this.props.history.push("/");
  }
}

第IProps & Route行表示期望的道具是我自己的道具（IProps，无论您定义为什么，可能什么都不是）和Route道具的组合。

react-router v4的Route不会将其道具传递给组件-在React Typescript

2 个答案: