How to redirect to another route onclick ReactJS?

Redirect to another route in ReactJS is relatively easy with react-router-dom component. It also depends on the ReactJS version. If we have ReactJS version more than V4 then we can use withRouter HOC. Following is an example of onclick event that redirects to another route.

import React, {Component} from 'react';
import { withRouter } from "react-router-dom";

class Search extends Component{

    handleClick = (value) => {
        this.props.history.push("/path-to-new-route");
    };
    render() {
        return (
            <div>
                <button onClick={this.handleClick} type="button"></button>
            </div>
        );
    }
}

export default withRouter(Search)
Share