Java, .NET, PHP, PYTHON, ANGULAR, ML, Data Science, Testing, CI Tutorials in Easy Languages.

"Best Software Training, Internship, Project Development center of Indore India, Helpline 780506-3968"

 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();



Post a Comment

POST Answer of Questions and ASK to Doubt

Previous Post Next Post