• Home
  • Privacy Policy
  • About Us
  • Contact Us
  • sitemap

ITProSpt

Share useful informations about IT

  • Windows
  • Active Directory
  • Chrome
  • Office
  • Outlook
  • Mobile
  • ↻ More
    • Gaming
    • VLC
    • Software
    • Gmail
    • Login Portals
    • QA
    • Education

React button onClick redirect page

March 9, 2022 by thepros

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

  • Top Ways To Create A User-Friendly Online Property Search For Your Real Estate Clients
    If you’re running a real estate business, you’re well aware that pretty much most of the paperwork has become automated and it’s time for you really get an education on what you need to use in terms of technology. This is important to make your online presence and services stand out from the competition.  Like […]
  • List Education Websites for Students, providing a variety of materials and completely free
    Everyone would like to get the highest quality of education in order to fulfill their goals. But the more an institution is of high quality and reputable, the more fees they charge. Students typically leave their education in a state of nil and work blue collar jobs to achieve their primary needs. Additionally, they collect […]
  • Simple solution to correct the requests.exceptions.ConnectionError: (‘Connection aborted.’ RemoteDisconnected(‘Remote end closed connection without response’)) issue 
    Python is a popular programming language that can be used widely in a lot of applications. Python is also a good choice as a programming language depending on user background and perspective. Because it is used widely and popular, if you find any errors when using Python. It is a common problem, you face the […]
  • “[Errno 61] Connection refused” is occurring even, the program is connecting with the port well and the socket is running in the interfaces.
    If you see the “[Errno 61] Connection refused” issue although you checked the program, port, socket and interfaces. Although your program of Python works well in the server and the client, they are installed at the same device. The local IP from my device is connecting with the clients but this IP is not connected […]
  • Description “Return by Reference”.
    C++ is considered not only as a language of Object Oriented Programming, but also an intermediate level language. It identifies both high and low level languages. It became easy and widely used in computer programs and that is the reason why we should understand the definition and its function as well. Such as Return by […]
Post Views: 192

Related Posts:

  • How to solve “Unhandled Rejection (TypeError): e.preventDefault is not a function”
    How to solve “Unhandled Rejection (TypeError):…
  • Can’t Perform A React State Update On An Unmounted Component In React-Hooks
    Can’t Perform A React State Update On An Unmounted Component…
  • The simple way to fix "Unable to resolve dependency tree” in Reactjs
    The simple way to fix "Unable to resolve dependency tree” in…
  • "Module not found: Error: Can’t resolve ‘react/jsx-runtime’" - Problem-Solving Techniques When You Use ReactJs
    "Module not found: Error: Can’t resolve ‘react/jsx-runtime’"…
  • Tips On Dealing With The Error “Cannot find module ‘react’ or its corresponding type declarations”
    Tips On Dealing With The Error “Cannot find module ‘react’…
  • Attempted import error: ‘firebase/app’ does not contain a default export (imported as ‘firebase’)
    Attempted import error: ‘firebase/app’ does not contain a…
  • Failed to compile ./src/components/App/App.js Module not found: Can’t resolve ‘react-router-dom’
    Failed to compile ./src/components/App/App.js Module not…
  • How to use correctly "useMemo vs. useEffect + useState"
    How to use correctly "useMemo vs. useEffect + useState"

Filed Under: ReactJS

Recent Posts

  • Top Ways To Create A User-Friendly Online Property Search For Your Real Estate Clients
  • List Education Websites for Students, providing a variety of materials and completely free
  • Simple solution to correct the requests.exceptions.ConnectionError: (‘Connection aborted.’ RemoteDisconnected(‘Remote end closed connection without response’)) issue 

Categories

Copyright © 2022 · Itprospt.com