Routing in React JS

Routing is used to create a navigation path in react js application.

now I have created two-component one for addition and another for prime number and navigate this component from the app.js file.

React JS navigation is mandatory, without navigation we can not create a multi-page web application.

React JS provides react-router-dom to implement navigation properties from one component to another.

step for navigation

1)  Open a terminal and write the following command

npm install react-router-dom

2)  Complete code of app.js file

import logo from './logo.svg';

import './App.css';

import React, { Component }  from 'react';

import ReactDOM from "react-dom";

import { BrowserRouter, Routes, Route } from "react-router-dom";

import { Design } from './Design';

import { Info } from './Info';

import Hello  from './Hello';

import Gallery  from './Gallery';

import Services  from './Services';

function App() {

  return (

    <BrowserRouter>

      <Routes>

        <Route path="/" element={<Design />}>

         

          <Route path="blogs" element={<Hello />} />

          <Route path="info" element={<Info />} />

          <Route path="gallery" element={<Gallery />} />

          <Route path="services" element={<Services />} />

          </Route>

      </Routes>

    </BrowserRouter>

   

  );

}

export default App;

3)  Create two  Components for blogs and info

4)    Create Design.js

import React from "react"

import {Header} from "./Header"

import {Footer} from "./Footer"

import { Outlet } from "react-router-dom";

export class Design extends React.Component

{

   

    render(){

        return(

          <div>

             <Header />

              <section>

              <Outlet />    

              </section>

              <Footer />

             

          </div>

        );

    }

}

5) Create Gallery.js

import React, { Component }  from 'react';

function Gallery()

{

    return(<div>

       <h1>Welcome in Gallery </h1>

       <div style={{float:'left'}}><img src="kang.png" height="300"  /></div>

       <div style={{float:'right'}}><iframe width="560" height="315" src="https://www.youtube.com/embed/hF8LIfYfQzo" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen /></div>

       

       

    </div>);

}

export default Gallery;

6)

import React, { Component }  from 'react';

function Services()

{

    return(<div>

       <h1>Welcome in Services </h1>

    </div>);

}

export default Services;

5)  Create Two Components Header.js and Footer.js

import React from "react"

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

export class Header extends React.Component

{

   

    render(){

        return(

          <div>

              <header>

              <nav>

        <ul>

          <li>

            <Link to="/">Home</Link>

          </li>

          <li>

            <Link to="/blogs">Blogs</Link>

          </li>

          <li>

            <Link to="/info">Contact</Link>

          </li>

        </ul>

      </nav>

              </header>

             

          </div>

        );

    }

}

Footer.js

import React from "react"

export class Footer extends React.Component

{

   

    render(){

        return(

          <div>

             

              <footer>

                      Footer    

              </footer>

          </div>

        );

    }

}

Index.JS

import React from 'react';

import ReactDOM from 'react-dom';

import './index.css';

import App from './App';

import reportWebVitals from './reportWebVitals';

//const x = 11

//var result = <p>{ x%2==0?"even":"odd"}</p>

//const x = ['C','CPP','DS','JAVA','PHP']

ReactDOM.render(

  <React.StrictMode>

    <App />

  </React.StrictMode>,

  document.getElementById('xyz')

);

//ReactDOM.render(result,document.getElementById('xyz'));

// If you want to start measuring performance in your app, pass a function

// to log results (for example: reportWebVitals(console.log))

// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals

reportWebVitals();