I'm very new to React and first time time trying to implement navigation to a new page by pushing it to the history but am stuck on this error Cannot read property 'push' of undefined for react use history
for a couple of hours now and think I need some help or guidance please.
Here are my small mvp components (I'm using Hooks):
import React, {useEffect, useState} from 'react';
import {BrowserRouter as Router, Route, Switch, useHistory} from "react-router-dom";
import Report from "./components/Report";
function App() {
let history = useHistory();
function handleClick() {
history.push("/report");
}
return (
<Router>
<Route path="/report" component={Report}/>
<div>
<button onClick={handleClick}>Click me</button>
</div>
</Router>
);
}
export default App
And
import React from "react";
import {withRouter} from "react-router-dom";
const Report = () => {
return (
<div>Hello from report</div>
);
}
export default withRouter(Report)
Thank you very much.
Update
codesandbox.io/s/crazy-hill-1i6gb
I've added my complete code on the above link. The url now changes and no longer get the undefined error as per @Abir answer but the click me button still shows up rather than the text for the Report component.