Dj Techblog

A blog on web development

React router for navigation within the app

Last modified on July 09, 2022

React Router is the library for routing within the react app. For react router to run within the react app we need to install react-router-dom in our react app. To install we run the following command in the terminal.

$ npm install react-router-dom

In order to build a fully functional react app with routing enabled we need to import BrowserRouter, Routes and Route within the app. <BrowserRouter> is the recommended interface for running React Router in a web browser, whereas Routes and Route defines the routes actually. Routes is the parent component while Route is the child component. Routes contain multiple Route elements.

Route contains two components inside it one is path another is the element which is rendered when the url matches the path.

<Route exact path='link' element={<Link>}

We will create following files inside our /src directory, App.js, , Head.js, Link0.js, Link1.js, Link2.js, Link3.js, Link4.js.

Dependencies: We will install the necessary dependecies for react router app to run smoothly in this case apart from react-router-dom, we need to install bootstrap only.

landing page form

Create your App.js file



Import the App.js file in your index.js file for the react app to run successfully.

App.js

        import React from 'react';
        import { BrowserRouter, Route, Routes } from 'react-router-dom';
        import 'bootstrap/dist/css/bootstrap.min.css';
        import NoPage from './NoPage'
        import Link1 from './Link1'
        import Link2 from './Link2'
        import Link3 from './Link3'
        import Link4 from './Link4'
        import Link0 from './Link0'
        import Head from './Head'
        function App(){
          return(
            <>
        
        
              <BrowserRouter>
                  <Head/>
                  <Routes>
                    <Route exact path="/" element={<Link0/>}/>
                    <Route exact path="/link1" element={<Link1/>}/>
                    <Route exact path="/link2" element={<Link2/>}/>
                    <Route exact path="/link3" element={<Link3/>}/>
                    <Route exact path="/link4" element={<Link4/>}/>
                    <Route path="*" element={<NoPage />} />
                  </Routes>
                 
              </BrowserRouter>
        
              
            </>
          );
        } 
          
        export default App;

Build Head.js files



Next will create the Navbar component which will contain all the links of our react app.

Head.js

        import React from "react";
        import { Navbar } from "react-bootstrap";
        import {Container} from "react-bootstrap";
        import { Nav } from "react-bootstrap";
        
        const Home = () => {
            return(
                <>
                   <Navbar bg="light" expand="lg">
                      <Container>
                        <Navbar.Brand className='mx-5' href="/">React-Router</Navbar.Brand>
                        <Navbar.Toggle aria-controls="basic-navbar-nav" />
                        <Navbar.Collapse id="basic-navbar-nav">
                          <Nav className="me-auto">
                            <Nav.Link className="mx-2" href="/">Home</Nav.Link>
                            <Nav.Link className="mx-2" href="/link1">About</Nav.Link>
                            <Nav.Link className="mx-2" href="/link2">Courses</Nav.Link>
                            <Nav.Link className="mx-2" href="/link3">Instructors</Nav.Link>
                            <Nav.Link className="mx-2" href="/link4">Testimonials</Nav.Link>
                          </Nav>
                        </Navbar.Collapse>
                      </Container>
                    </Navbar>
          
            </>
            );
            
        }
        
        export default Home;

Build Link.js files



Our next job is to build files one by one which will render the link components within the app.

Link0.js

        import React from "react";
        import { Container } from "react-bootstrap";
        import 'bootstrap/dist/css/bootstrap.min.css';
        const Link0 = () => {
            return(
                <>
                   <Container className="text-center pt-5">
                    <h1>Home</h1>
                   </Container>
          
            </>
            );
            
        }
        
        export default Link0;

Link1.js

        import React from "react";
        import { Container } from "react-bootstrap";
        import 'bootstrap/dist/css/bootstrap.min.css';
        const Link1 = () => {
            return(
                <>
                   <Container className="text-center pt-5">
                    <h1>Abouts</h1>
                   </Container>
          
            </>
            );
            
        }
        
        export default Link1;

Link2.js

        import React from "react";
        import { Container } from "react-bootstrap";
        import 'bootstrap/dist/css/bootstrap.min.css';
        const Link2 = () => {
            return(
                <>
                   <Container className="text-center pt-5">
                    <h1>Courses</h1>
                   </Container>
          
            </>
            );
            
        }
        
        export default Link2;

Link3.js

        import React from "react";
        import { Container } from "react-bootstrap";
        import 'bootstrap/dist/css/bootstrap.min.css';
        const Link3 = () => {
            return(
                <>
                   <Container className="text-center pt-5">
                    <h1>Instructors</h1>
                   </Container>
          
            </>
            );
            
        }
        
        export default Link3;

Link4.js

        import React from "react";
        import { Container } from "react-bootstrap";
        import 'bootstrap/dist/css/bootstrap.min.css';
        const Link4 = () => {
            return(
                <>
                   <Container className="text-center pt-5">
                    <h1>Testimonials</h1>
                   </Container>
          
            </>
            );
            
        }
        
        export default Link4;
landing page form

Published on 9 July, 2022


Ad section

Intro

Debabratta Jena

I mainly write about HTML5, CSS3, Javascript, Angular JS, Ajax, PHP, Mysql, On page SEO, Google Ads, Tag manager, Universal Analytics, Google My Business, SERP, Apache server configuration etc, Yoga is my passion.

Reach to me in the contact us form below

Follow me on

Contact us

Subscribe

Tags

Php HTML5 Javascript CSS Ajax Angular JS Google My bisiness Listing Google tag Manager Google Universal Analytics Search Engine Optimization On page SEO Off page SEO Google Marketing platform Digital Marketing Google Ads Mysql Apache Server

Ad section
×

Subscribe to get email notification about our new post

Name

Email

We neither sell nor share your personal information with any third party. Your identity is safe with us.