react button onClick redirect page

update:

React Router v5 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;

with React Router v5:

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;

with React Router v4:

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 {  constuctor() {    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);

Don't use a button as a link. Instead, use a link styled as a button.

<Link to="/signup" className="btn btn-primary">Sign up</Link>

React Router v5.1.2:

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