react button onClick redirect page

Question

I am working on web application using React and bootstrap. When it comes to applying button onClick, it takes me hard time to let my page being redirect to another. if after a href , I cannot go the another page.

So would you please tell me is there any need for using react-navigation or other to navigate the page using Button onClick ?

import React, { Component } from 'react'; import { Button, Card, CardBody, CardGroup, Col, Container, Input, InputGroup, InputGroupAddon, InputGroupText, Row, NavLink  } from 'reactstrap';  class LoginLayout extends Component {    render() {     return (  <div className="app flex-row align-items-center">         <Container>      ...                     <Row>                       <Col xs="6">                                               <Button color="primary" className="px-4">                             Login                          </Button>                       </Col>                       <Col xs="6" className="text-right">                         <Button color="link" className="px-0">Forgot password?</Button>                       </Col>                     </Row>                ...         </Container>       </div>     );   } } 

Answer 1

update:

React Router v6:

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>   ); }} 

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);