latest update:

Implemented React Router version 6:

import React from 'react';
import { useNavigate } from "react-router-dom";
function LoginLayout() {
  
  let navigate = useNavigate(); 
  const routeChange = () =>{ 
    let path = `newPath`; 
    navigate(path);
  }
  
  return (
     <div className="app flex-row align-items-center">
      <Container>
      ...          
          <Button color="primary" className="px-4"
            onClick={routeChange}
              >
              Login
            </Button>
      ...
       </Container>
    </div>
  );
}}

Utilizing React Router version 5 with hooks:

import React from 'react';
import { useHistory } from "react-router-dom";
function LoginLayout() {
  
  const history = useHistory();
  
  const routeChange = () =>{ 
    let path = `newPath`; 
    history.push(path);
  }

  return (
      <div className="app flex-row align-items-center">
        <Container>
          ...
          <Row>
            <Col xs="6">                      
              <Button color="primary" className="px-4"
                onClick={routeChange}
                  >
                  Login
                </Button>
            </Col>
            <Col xs="6" className="text-right">
              <Button color="link" className="px-0">Forgot password?</Button>
            </Col>
          </Row>
          ...
        </Container>
      </div>
  );
}
export default LoginLayout;

Using React Router version 5:

import { useHistory } from 'react-router-dom';
import { Button, Card, CardBody, CardGroup, Col, Container, Input, InputGroup, InputGroupAddon, InputGroupText, Row, NavLink  } from 'reactstrap';
    
class LoginLayout extends Component {
  
  routeChange=()=>{
    let path = `newPath`;
    let history = useHistory();
    history.push(path);
  }

  render() {
    return (
      <div className="app flex-row align-items-center">
        <Container>
          ...
          <Row>
            <Col xs="6">                      
              <Button color="primary" className="px-4"
                onClick={this.routeChange}
                  >
                  Login
                </Button>
            </Col>
            <Col xs="6" className="text-right">
              <Button color="link" className="px-0">Forgot password?</Button>
            </Col>
          </Row>
          ...
        </Container>
      </div>
    );
  }
}

export default LoginLayout;

implemented using React Router version 4:

import { withRouter } from 'react-router-dom';
import { Button, Card, CardBody, CardGroup, Col, Container, Input, InputGroup, InputGroupAddon, InputGroupText, Row, NavLink  } from 'reactstrap';
    
class LoginLayout extends Component {
  constructor() {
    this.routeChange = this.routeChange.bind(this);
  }

  routeChange() {
    let path = `newPath`;
    this.props.history.push(path);
  }

  render() {
    return (
      <div className="app flex-row align-items-center">
        <Container>
          ...
          <Row>
            <Col xs="6">                      
              <Button color="primary" className="px-4"
                onClick={this.routeChange}
                  >
                  Login
                </Button>
            </Col>
            <Col xs="6" className="text-right">
              <Button color="link" className="px-0">Forgot password?</Button>
            </Col>
          </Row>
          ...
        </Container>
      </div>
    );
  }
}

export default withRouter(LoginLayout);

Using React Router version 5.1.2:

import { useHistory } from 'react-router-dom';
const App = () => {
   const history = useHistory()
   <i className="icon list arrow left"
      onClick={() => {
        history.goBack()
   }}></i>
}

It's actually quite simple to accomplish this without the need for any additional functions or libraries.

When the button is clicked, the page will redirect to '/your-href'.

I attempted to use Redirect but had no luck. Surprisingly, redirecting onClick is much easier than we realize. Simply insert the following simple JavaScript code within your onClick function:

window.location.href="pagelink"

To start off, include the following:

import { useHistory } from 'react-router-dom';

Next, within your function or class:

const history = useHistory();

Lastly, integrate it into the onClick event:

<Button onClick={()=> history.push("/mypage")}>Click me!</Button>

If you want to achieve this easily, you can follow these steps:

onClick={this.handleFunction.bind(this)}

The function would look like this:

handleFunction() {
  this.props.history.push("/Home");
}

Lastly, don't forget to include the withRouter:

import { withRouter } from 'react-router-dom';

And export it as:

export default withRouter (ComponentName);

Using the useHistory() function provided by react-router-dom may be the solution to your issue.

import React from 'react';
import { useHistory } from "react-router-dom";
function NavigationExample() {
  const history = useHistory();
  const goToPage = () => history.push('/exampleURL');//for example: history.push('/dashboard');

  return (
   <div>
   <button onClick={goToPage} type="button" />
   </div>
  );
}
export default NavigationExample;

If you're faced with the failure of all the previously mentioned methods, consider implementing a solution similar to this one:

    import React, { Component } from 'react';
    import { Redirect } from "react-router";
    
    export default class Reedirect extends Component {
        state = {
            redirect: false
        }
        redirectHandler = () => {
            this.setState({ redirect: true })
            this.renderRedirect();
        }
        renderRedirect = () => {
            if (this.state.redirect) {
                return <Redirect to='/' />
            }
        }
        render() {
            return (
                <>
                    <button onClick={this.redirectHandler}>click me</button>
                    {this.renderRedirect()}
                </>
            )
        }
    }

To redirect to a specific route when a Click event occurs:

Simply follow these steps

In a Functional Component:

props.history.push('/link')

In a Class Component:

this.props.history.push('/link')

For example:

<button onClick={()=>{props.history.push('/link')}} >Click Me</button>

Tested on:

react-router-dom: 5.2.0,

react: 16.12.0

In case you have already set up a class to specify the characteristics of your Button and wish to utilize it in another class to link it with a button created within this new class, you can simply import your "Button" (or whatever name your button class has) and apply the following code:

import React , {useState} from 'react';
import {Button} from '../Button';

function WorkingWithButtons() {
const [button] = useState(true);

return (
    <div className='button-class'>
        {button && <Button onClick={()=> window.location.href='/yourPath'}
            Click Me</Button>
    </div>
    )
}

export default WorkingWithButtons

Always remember to include {Link} from the "react-router-dom" package; Simply use a hyperlink instead of a function.

import {Link} from "react-router-dom";

<Button>
   <Link to="/yourRoute">Route Name</Link>
</Button>

To create a simple router without the need for a library, you can use a click handler on a button and set window.location.hash if your destination is within the app.

An alternative approach is to listen for the hashchange event on window, parse the URL received, update the state using this.setState(), and effectively manage routing in your application.

class LoginLayout extends Component {
    constructor() {
      this.handlePageChange = this.handlePageChange.bind(this);
      this.handleRouteChange = this.handleRouteChange.bind(this);
      this.state = { page_number: 0 }
    }

    handlePageChange() {
        window.location.hash = "#/my/target/url";
    }

    handleRouteChange(event) {
        const destination = event.newURL;
        // Implement logic to determine how to set internal state based on URL conditions.
        if (some_condition) {
            this.setState({ page_number: 1 });
        }
    }

    componentDidMount() {
        window.addEventListener('hashchange', this.handleRouteChange, false);
    }

    render() {
        // @TODO: Evaluate this.state.page_number and render the appropriate page content.
        return (
          <div className="app flex-row align-items-center">
            <Container>
              ...
                <Row>
                  <Col xs="6">                      
                    <Button 
                       color="primary"
                       className="px-4"
                       onClick={this.handlePageChange}
                    >
                      Login
                     </Button>
                  </Col>
                  <Col xs="6" className="text-right">
                    <Button color="link" className="px-0">Forgot password </Button>
                  </Col>
                </Row>
              ...
           </Container>
          </div>
        );
    }
}

When using React Router version 5.1:

import {useHistory} from 'react-router-dom';
import React, {Component} from 'react';
import {Button} from 'reactstrap';
.....
.....
export class CustomComponent extends Component {
    .....
    componentDidMount() { 
        let customHistory = useHistory;
        .......
    }

    render() {
        return(
        .....
        .....
            <Button className="customClass" onClick={() => customHistory.back()}>Go Back</Button>

        )
    }
}

I had encountered an issue with routing to a different view using Navlink.

Here is my successful implementation:

<NavLink tag='li'>
  <div
    onClick={() =>
      this.props.history.push('/admin/my-settings')
    }
  >
    <DropdownItem className='nav-item'>
      Settings
    </DropdownItem>
  </div>
</NavLink>

To resolve the problem, I wrapped it with a div and assigned the onClick handler to the div, utilizing the history object to navigate to the new view.