I have the following piece of code, which receives a history object as prop:
const ChildComponent = ({ history }) => (
<div className={styles.body}>
<div className={styles.cta}>
<FloatingActionButton onClick={() => history.push(routes[4].path)}>
<span>Click me</span>
</FloatingActionButton>
</div>
</div>
);
How do I add typecheck for this history prop, which is received by wrapping it's parent with withRouter HOC? One way I could think of is to write something like this:
interface Props {
history: {
push(url: string): void;
};
}
But I'm sure this is not the right way, because rest of the properties of the history object are being lost.
Can you suggest the right way of doing this?
UPDATED the code based on @Oblosys's answer
import { withRouter, RouteComponentProps } from "react-router-dom";
interface Props extends RouteComponentProps<any> {
/* Parent component's props*/
}
class Parent extends React.Component<Props, {}> {
render() {
return <ChildComponent history={this.props.history} />;
}
}
//Child component related stuff
interface ChildComponentProps extends RouteComponentProps<any> {}
const ChildComponent: React.SFC<ChildComponentProps> = (props) => (
<div className={styles.body}>
<div className={styles.cta}>
<FloatingActionButton onClick={() => history.push(routes[4].path)}>
<span>Click me</span>
</FloatingActionButton>
</div>
</div>
);
function mapStateToProps(state: types.AppState) {
/* related code */
}
function mapDispatchToProps(dispatch: Redux.Dispatch<types.AppState>{
/* related code */
}
export default withRouter(connect(mapStateToProps, mapDispatchToProps)(Parent));
But, now I'm getting the following error:
Type '{ history: History; }' is not assignable to type 'ChildComponentProps'.
Property 'match' is missing in type '{ history: History; }'
You can use the RouteComponentProps interface, which declares all props passed by withRouter:
import { RouteComponentProps } from 'react-router-dom';
..
interface ChildComponentProps extends RouteComponentProps<any> {
/* other props for ChildComponent */
}
const ChildComponent : React.SFC<ChildComponentProps> = ({ history }) => (
..
);
The type parameter to RouteComponentProps is the type of the params property in match, so you won't need it unless you're matching named path segments.
Alternatively, if history doesn't come from withRouter but is passed by itself as a prop, you can import the type from history:
import { History } from 'history';
..
interface ChildComponentProps {
history : History
/* other props for ChildComponent */
}
const ChildComponent : React.SFC<ChildComponentProps> = ({ history }) => (
..
);
The simplest solution I found
import { RouteComponentProps } from 'react-router-dom';
....
interface Foo{
history: RouteComponentProps["history"];
location: RouteComponentProps['location'];
match: RouteComponentProps['match'];
}
For React 16.8 with hooks:
...
import {withRouter, RouteComponentProps} from 'react-router-dom';
...
const ChildComponent: React.FunctionComponent<RouteComponentProps> = ({history}) => {
...
}