I am using React and Typescript and react-router
- I want to use RouteComponentProps
to bind this.props.history
automatically. This is my code:
import * as React from "react";
import { connect } from "react-redux";
import {
RouteComponentProps,
withRouter,
} from "react-router-native";
import Example from "../../screens/Example";
interface Props {}
interface State {}
class ExampleContainer extends React.Component<RouteComponentProps & Props, State> {
isValid(value): void {
if (value!=="") {
this.props.history.push('/tasks')
}
}
render() {
return (
<Example callback={(value: string) => this.isValid(value)} />
);
}
}
const mapDispatchToProps = (_) => ({});
const mapStateToProps = (_) => ({});
export default withRouter(connect(mapStateToProps, mapDispatchToProps)(ExampleContainer));
However, I get a weird compiler error telling me that RouteComponentProps
is never used, but at the same time it is not defined. Here the exact error message:
src/containers/ExampleContainer/index.tsx:4:2 - error TS6133: 'RouteComponentProps' is declared but its value is never read.
4 RouteComponentProps,
~~~~~~~~~~~~~~~~~~~
src/containers/ExampleContainer/index.tsx:13:48 - error TS2304: Cannot find name 'RouteComponentProps'.
13 class ExampleContainer extends React.Component<RouteComponentProps & Props, State> {
~~~~~~~~~~~~~~~~~~~
How do I bind react-router
props correctly? I believe I should at least get a TypeError
of some sort if I am doing it wrong, but I can not comprehend this error...
I appreciate any help pointing me to the source of the error. Thanks in advance!