Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

How to redirect to another page in ReactJS ?

  • Last Updated : 18 Oct, 2021

In this article, we are going to learn How to redirect to another page in ReactJS using react-router-dom package. ReactJS is a free and open source front-end library used for building single page applications. 

react-router-dom: react-router-dom is a reactJS package, It enables you to implement dynamic routing in a web page.

Approach:

  • Create basic react app.
  • Make different pages for routing.
  • Install react-router-dom package.
  • Implement routing using react-router-dom package.

Step 1: Create a basic react app using the following command in your terminal.

npx create-react-app <project_name>

 



Project Structure: After creating the basic react app, the folder structure looks like this,

Folder structure of react-app

Step 2: Make different pages for routing. Here, We are going to create different components for our react-app. So that we route over them for demonstration.

Components: Home Page, About Page, ContactUs Page. 

After creating components, the Folder structure looks like this,

Folder structure after making components

Home.jsx




import React from "react";
  
const Home = () => {
  return (
    <div>
      <h1>Home Page</h1>
    </div>
  );
};
  
export default Home;


About.jsx




import React from "react";
  
const About = () => {
  return (
    <div>
      <h1>About Page</h1>
    </div>
  );
};
  
export default About;


ContactUs.jsx




import React from "react";
  
const ContactUs = () => {
  return (
    <div>
      <h1>Contact Us Page</h1>
    </div>
  );
};
  
export default ContactUs;


Step 3: Install react-router-dom package.

Here, We are going to install the react-router-dom package in our react-app, using the following command.



npm i react-router-dom

Installing react-router-dom

After installing react-router-dom package package.json file looks like this,

Package.json

Step 3: Implement routing using the react-router-dom package. Here, We are going to implement the react-router-dom package in our react-app. To implement this, We have to import some components from the react-router-dom package i.e.  BrowserRouter, Switch, Route, and Redirect.

import { BrowserRouter as Router, Switch, 
    Route, Redirect,} from "react-router-dom";

Note: We make an alias of  BrowserRouter as Router, just make things simple.

Let’s see all the imported components one by one:

  • BrowserRouter: It uses the HTML5 history API to keep the UI in sync with the URL.
  • Route: Its responsibility is to render UI, when its path matches the current URL.
  • Switch: It renders the first child Route or Redirect that matches the location.
  • Redirect: It renders the new location irrespective of the current location in history stack.

Here, is the code of the App.js file where We are going to implement the react-router-dom package.

App.js




import "./App.css";
// importing components from react-router-dom package
import {
  BrowserRouter as Router,
  Switch,
  Route,
  Redirect,
} from "react-router-dom";
  
// import Home component
import Home from "./components/Home";
// import About component
import About from "./components/About";
// import ContactUs component
import ContactUs from "./components/ContactUs";
  
function App() {
  return (
    <>
      {/* This is the alias of BrowserRouter i.e. Router */}
      <Router>
        <Switch>
          {/* This route is for home component 
          with exact path "/", in component props 
          we passes the imported component*/}
          <Route exact path="/" component={Home} />
            
          {/* This route is for about component 
          with exact path "/about", in component 
          props we passes the imported component*/}
          <Route path="/about" component={About} />
            
          {/* This route is for contactus component
          with exact path "/contactus", in 
          component props we passes the imported component*/}
          <Route path="/contactus" component={ContactUs} />
            
          {/* If any route mismatches the upper 
          route endpoints then, redirect triggers 
          and redirects app to home component with to="/" */}
          <Redirect to="/" />
        </Switch>
      </Router>
    </>
  );
}
  
export default App;


Step 4: After implementing routing in App.js file, We have to give the routing end points at user side. So, We are going to give the routing endpoints in Home.jsx file.

Here is the updated Home.jsx file. 

Home.jsx




import React from "react";
// importing Link from react-router-dom to navigate to 
// different end points.
import { Link } from "react-router-dom";
  
const Home = () => {
  return (
    <div>
      <h1>Home Page</h1>
      <br />
      <ul>
        <li>
          {/* Endpoint to route to Home component */}
          <Link to="/">Home</Link>
        </li>
        <li>
          {/* Endpoint to route to About component */}
          <Link to="/about">About</Link>
        </li>
        <li>
          {/* Endpoint to route to Contact Us component */}
          <Link to="/contactus">Contact Us</Link>
        </li>
      </ul>
    </div>
  );
};
  
export default Home;


Step to run the application: Open the terminal and run the following command.

npm start

Output: 

React-app output




My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!