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 property 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 ReactDOM from 'react-dom';
import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link
from "react-router-dom";
import { Addition } from './Addition';
import { Prime } from './Prime';
export  function App() {
  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">Prime</Link>
            </li>
            <li>
              <Link to="/addition">Addition</Link>
            </li>
           
          </ul>
        </nav>

        {/* A <Switch> looks through its children <Route>s and
            renders the first one that matches the current URL. */}
        <Switch>
         
          <Route path="/addition">
            <Addition />
          </Route>
          <Route path="/">
            <Prime />
          </Route>
        </Switch>
      </div>
    </Router>
  );
}



3)  Create Component for Prime.js and Addition.js


Note:-  Switch is a



predefine component to navigate from one component to another.



Post a Comment

POST Answer of Questions and ASK to Doubt

Previous Post Next Post