react-router v4 的路由不会将它的道具传递给组件 - 在 React Typescript 中
react-router v4's Route doesn't pass it's props to component - in React Typescript
我刚开始使用 React Router v4,无法使用 Browserrouter 的历史记录。例如,当我尝试访问 this.props.history.push("/")
时出现错误:
TS2339: Property 'history' does not exist on type 'Readonly<{ children?: ReactNode; }> & Readonly<{}>'
我正在使用带有 Browserrouter 的 React Router v4 和带有 Typescript 的 React。似乎 React Router 的路由中的三个道具(位置、历史、匹配)没有传递给它的组件。
我在 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。我将这个道具添加到我的 class 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>}>'
您应该可以在路由组件中访问它,但您需要让 Typescript 知道您希望它们作为 props:
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 道具的组合。
自己解决了
我的解决方案是将路由道具添加到我的道具类型中。
import {RouteComponentProps} from 'react-router';
class GotNoHistory extends React.Component<RouteComponentProps<any>> {
render() {
return <div>Go back {this.props.history.push("/")}</div>;
}
}
对于那些像我以前一样不知道这意味着什么的人<RouteComponentProps<any>>
:
参数为道具类型。
所以之前它只是 React.Component
这意味着我们不希望我的路由器有任何道具。所以这是行不通的!
我刚开始使用 React Router v4,无法使用 Browserrouter 的历史记录。例如,当我尝试访问 this.props.history.push("/")
时出现错误:
TS2339: Property 'history' does not exist on type 'Readonly<{ children?: ReactNode; }> & Readonly<{}>'
我正在使用带有 Browserrouter 的 React Router v4 和带有 Typescript 的 React。似乎 React Router 的路由中的三个道具(位置、历史、匹配)没有传递给它的组件。 我在 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。我将这个道具添加到我的 class 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>}>'
您应该可以在路由组件中访问它,但您需要让 Typescript 知道您希望它们作为 props:
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 道具的组合。
自己解决了
我的解决方案是将路由道具添加到我的道具类型中。
import {RouteComponentProps} from 'react-router';
class GotNoHistory extends React.Component<RouteComponentProps<any>> {
render() {
return <div>Go back {this.props.history.push("/")}</div>;
}
}
对于那些像我以前一样不知道这意味着什么的人<RouteComponentProps<any>>
:
参数为道具类型。
所以之前它只是 React.Component
这意味着我们不希望我的路由器有任何道具。所以这是行不通的!