Stateless component React router
In 2019, React Router v4 has now added the useHistory hook for stateless / functional components:
https://reacttraining.com/react-router/web/api/Hooks/usehistory
From the docs:
import { useHistory } from "react-router-dom";
function HomeButton() {
let history = useHistory();
function handleClick() {
history.push("/home");
}
return (
<button type="button" onClick={handleClick}>
Go home
</button>
);
}
It worked for me by using withRouter, (plus ignoring typescript warning):
import { withRouter } from 'react-router-dom';
...
type Props = { myProp: boolean };
// @ts-ignore
export const MyComponent: FC<Props> = withRouter(({ myProp, history }) => {
...
})