Route to another page on click button reactjs - reactjs

Question

Am new to reactjs and now working on routing and navigation. On pressing button am trying to navigate to new page, but it throws error.
my App.js file:
import React from 'react';
import './App.css';
import Editor from './editor';
import {BrowserRouter as Router, Route, Link} from "react-router-dom";
import {createBrowserHistory} from "history";
const history = createBrowserHistory();
class App extends React.Component {
constructor(props) {
super(props);
this.state ={
};
this.onProductClick = this.onProductClick.bind(this);
}
onProductClick(){
console.log('clicked');
this.history.push('/editor');
}
render() {
return (
<Router>
<div>
<Route path='/editor' component={Editor} history={history} />
</div>
<div>
<button onClick={this.onProductClick} className="btn btn-primary" id="a_1">Try now!</button>
</div>
</Router>
)
}
}
export default App;
And my editor.js file is this:
import React, { Component } from 'react';
class Editor extends React.Component {
constructor(props) {
super(props);
this.state = {
}
}
render() {
return (
<div id="editor">
<h3>Products Here</h3>
</div>
);
}
}
export default Editor;
after clicking the button the error message is:
TypeError: Cannot read property 'push' of undefined
15 | }
16 | onProductClick(){
17 | console.log('clicked');
> 18 | this.history.push('/editor');
19 | ^
20 | }
21 |
22 | render() {
I don't Understand what am doing wrong here.

Answer 1

It looks like your referencing this.history.push('/editor'); inside of onProductClick, because you are using this, the JS engine is trying to find the variable history in the context of the class but since there's no variable called history defined within the class's context it's evaluating to undefined.push leading to the error cannot read property push of undefined.
You did define a history variable outside of the class definition. To access it, you can change this.history.push('/editor'); to history.push('/editor'); with this change, you will be referencing the history variable you defined on the top.
Most likely however with React router, you should try to access the history object from props, so this.props.history.push('/editor')

Answer 2

The history object is available in the props. Use this.props.history.push instead. Also, there are a couple of things wrong about your code. Try isolating the routes and components. The button must be outside the router component. Use React.Fragment to render more than two components at once. Study up some more about react.