I am currently writing a small CRUD application. For my frontend I am using React v6. In my code I have a list of the Entity and above that I would have a button that takes me to a form that lets me add a new entry in the table. However, Even though I have routed the different URLs, after clicking the button I just get an error saying: Cannot read properties of undefined (reading 'push')
The lines of code in question are:
addContractor() {
this.props.history.push("/add-contractor");
}
In my App.js file I have the appropriate routing as well:
<Route path="/add-contractor" element = {<CreateContractorComponent/>}/>
I am not sure why this is happening and I would like some insight and explanation as I am very new to frontend development.
Thanks.
I guess the problem is with nested components, try nesting the Switch without wrapping it with a BrowserRouter in App.js file.
If it doesn't work try this alternative too, Might be a few things that have changed in the documentation. Import useNavigate instead of useHistory and for reference go through this blog - https://reacttraining.com/blog/react-router-v6-pre/