React button onClick redirect page

March 9, 2022

ReactJS

While learning react-router, you may need to redirect the user to some other page when you click on some button in your application. In this post, you’ll learn how to do that.

Tips On Redirecting From One Page To Another In React-router

In react-router, you may utilize a link styled as a button to redirect from one page to another. Here’s an example.

Option 1

You may utilize a link formatted as a button here.

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

Option 2

In React Router v5.1.2, you can use the react button onClick redirect page as follows:

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

Option 3

If you’re working with React Router v5 and 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;

Option 4

If you are utilizing 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>
    );
  }
}

Option 5

If you are utilizing React Router v4

Conclusion

We hope you found our blog post on reacting button onClick redirect page helpful. Please leave a comment if you have any other questions or concerns regarding this matter. Thank you for reading; we are always delighted anytime one of our pieces may give valuable information on this topic!

Related articles

Scroll to Top