close

how to navigate from one page to another in react js?

Hello Guys, How are you all? Hope You all Are Fine. Today we are going to learn how to navigate from one page to another in react js? in javascript. So Here I am Explain to you all the possible methods here.

Without wasting your time, Let’s start This Article.

how to navigate from one page to another in react js ?

  1. how to navigate from one page to another in react js ?

    to navigate from one page to another in react js If you want to build a single app I'd suggest using React Router. Otherwise you could just use plain Javascript:
    window.location = 'newUrl';

  2. how to navigate from one page to another in react js ?

    to navigate from one page to another in react js If you want to build a single app I'd suggest using React Router. Otherwise you could just use plain Javascript:
    window.location = 'newUrl';

Method 1

Below are the best ways to deal with react navigations

Using useHistory() from react-router-dom

import React from 'react';
import { useHistory } from "react-router-dom";
function NavigationDemo() {
  const history = useHistory();
  const navigateTo = () => history.push('/componentURL');//eg.history.push('/login');

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

Using Link from react-router-dom

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

  function NavigationDemo() {

  return (
   <div>
   <Link  to={{pathname: '/componentURL'}}>NavigateNow</Link>
   </div>
  );
}
export default NavigationDemo;

Using Redirect from react-router

  import { Redirect } from 'react-router';

   <Redirect to='/componentURL' />

Method 2

If you want to build a single app I’d suggest using React Router. Otherwise you could just use plain Javascript:

window.location = 'newUrl';

Summery

It’s all About this article. Hope all method helped you a lot. Comment below Your thoughts and your queries. Also, Comment below which method worked for you? Thank You.

Leave a Comment