How to navigate on path by button click in react router v4?

import {withRouter} from 'react-router-dom';...class App extends React.Component {  ...  nextPath(path) {    this.props.history.push(path);  }  render() {    return (      <button onClick={() => this.nextPath('/the/path') }>        change path       </button>    );  }}export default withRouter(App);

If you're using the button only for navigation, you can replace it with <Link />¹ and apply a button style.

<Link to='/new/location/'>Click Me</Link>

Or you can use the <NavLink />².

In case of using Material UI, you can use the following code:

import { Link } from 'react-router-dom'import Button from '@material-ui/core/Button';<Button component={Link} to="/new/location/">  Click Me</Button>

(1): import {Link} from "react-router-dom";
(2): import {NavLink} from "react-router-dom";

react-router-dom exports a hook called useHistory.Just import it and use it in your component like this:

import React from 'react';import { useHistory } from 'react-router-dom';export default () => {  const history = useHistory();     return (    <button onClick={() => history.push('/your/path')}>      Click me    </button>  );};

I'm using:

• "react": "^16.13.1"
• "react-router-dom": "^5.2.0"

Check this post for more details: https://ultimatecourses.com/blog/programmatically-navigate-react-router