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