[英]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的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>}>'
TS2339: Property 'history' does not exist on type 'Readonly<{ children?: ReactNode; }> & Readonly<{Props & Route<RouteProps>}>'
由我自己解決。
我的解決方案是將路徑道具添加到我的道具類型中。
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
,這意味着我們不希望我的路由器有任何道具。 所以這無法解決!
您應該在路徑組件中訪問它,但是您需要讓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,無論你定義為什么,可能沒什么)和道具道具的組合。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.