Answers for "using react router"

router react

npm install react-router-dom

what is router in react

React router as a browserRouter in App.js for navbar links like Home,
services,conatct-us etc.
   // npm install react-router-dom

// ##### Basic Routing #####
import React from 'react';
import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom';

export default function App() {
   return (
      <Router>
         <div>
            <nav>
               <ul>
                  <li>
                     <Link to="/">Home</Link>
                  </li>
                  <li>
                     <Link to="/about">About</Link>
                  </li>
                  <li>
                     <Link to="/users">Users</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="/about">
                  <About />
               </Route>
               <Route path="/users">
                  <Users />
               </Route>
               <Route path="/">
                  <Home />
               </Route>
            </Switch>
         </div>
      </Router>
   );
}

function Home() {
   return <h2>Home</h2>;
}

function About() {
   return <h2>About</h2>;
}

function Users() {
   return <h2>Users</h2>;
}

starting with react router dom

import React from "react";
import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link
} from "react-router-dom";

export default function App() {
  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/about">About</Link>
            </li>
            <li>
              <Link to="/users">Users</Link>
            </li>
          </ul>
        </nav>