Create Route In React

Introduction

In this article, we will learn how to create Route in React Application.

Now we will start by creating a new project for mock web service. 

Step 1 

Create an Angular project setup using the below commands or however, you create your React app. 

npx create-react-app projectname

Example

npx create-react-app sample-route 

Create Route in React

Step 2 - Installing react-route 

Since react-route is available as an NPM package, we can perform the installation by using the Node.js package manager.

Run the below command in the terminal. 

npm install react-router-dom 

Create Route in React

Step 3 - Installing React Bootstrap 

Open a new terminal and run the following below commands. 

Install Bootstrap as a dependency in your app.

npm install react-bootstrap bootstrap 

Create Route in React

Step 4

Create Project Folder structure,

We have created a Boostrap navbar menu in App.js.

Step 5

Now we will create three components. The App component will be used as a navbar menu. The other three components (Home), (About), and (Contact) are rendered components once the route changed. 

Home.js 

import React from 'react'
export default function Home() { 
    return ( 
        <div> 
              <h1>Home</h1> 
        </div> 
    ) 
}

About.js 

import React from 'react' 
export default function About() { 
    return ( 
        <div> 
              <h1>About</h1> 
        </div> 
    ) 
}

Conatct.js 

import React from 'react'
export default function Contact() {
    return ( 
     <div> 
         <h1>Contatct us</h1> 
   </div> 
 )
}

Step 6 - What is React Router

It is a standard library for routing in React and the navigation among views of various components in a React application, it's changing the browser URL. 

The Main Components of React Router are Followed below,

  • Route - It is the conditionally shown component that renders some UI when it matches the path of the current URL. 
  • Link - It works as an HTML anchor tag
  • BrowserRouter - It is a router implementation that uses the HTML5 history API to keep your UI in sync with the URL.
  • Switch - This is a component that will only render the first route that matches/includes the path. 

App.js 

import './App.css';
import 'bootstrap/dist/css/bootstrap.min.css';
import {
    BrowserRouter as Router,
    Switch,
    Route,
    Link
} from "react-router-dom";
import Home from './Modules/Home';
import About from './Modules/About';
import Contact from './Modules/Contact';

function App() {
 return (
  <div className="App">
  <Router>
    <div>
      <nav className="navbar navbar-expand-lg navbar-light bg-light">
        <div className="container-fluid">
          <button className="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span className="navbar-toggler-icon"></span>
          </button>
          <div className="collapse navbar-collapse" id="navbarSupportedContent">
            <ul className="navbar-nav me-auto mb-2">
              <li className="nav-item">
                <Link className="nav-link active" aria-current="page" to="/home">Home</Link>
              </li>
              <li className="nav-item">
                <Link className="nav-link" to="/About">About</Link>
              </li>
              <li className="nav-item">
                <Link className="nav-link" to="/Contact">Contact</Link>
              </li>
            </ul>
          </div>
        </div>
      </nav>
      <hr />
      <div className="container">
        <Switch>
          <Route path="/home">
            <Home />
          </Route>
          <Route path="/About">
            <About />
          </Route>
          <Route path="/">
            <Contact />
          </Route>
          <Route path="/Contact">
            <Contact />
          </Route>
        </Switch>
      </div>
     </div>
    </Router>
   </div>
  );
}
export default App;

Step 7

Now we will run the application.

Npm run start 

Create Route in React

On successful execution of the above command, it will show the browser, 

Create Route in React

Recommended Ebook

Printing in C# Made Easy

Download Now!
Similar Articles