Routing

npm i react-router-dom 

npx create-react-app routingapp

App.js

import Home from './components/Home';
import Blogs from './components/Blogs';
import Contact from './components/Contact';
import NoPage from './components/NoPage';
import { BrowserRouter, Outlet, Route, Routes } from 'react-router-dom';
import Layout from './components/Layout';

function App() {
  return (
    <>
    <h1>HELLO WORLD</h1>
    <BrowserRouter>
      <Routes>
        <Route path="/admin" element={<Layout />}>
          <Route index element={<Home />} />
          <Route path="contact" element={<Contact />} />
          <Route path="*" element={<NoPage />} />
        </Route>
        <Route path="/user" element={<Layout />}>
          <Route index element={<Home />} />
          <Route path="contact" element={<Contact />} />
          <Route path="blogs" element={<Blogs />} />
          <Route path="test" element={<div>This is test component</div>} />
          <Route path="*" element={<NoPage />} />    
        </Route>
      </Routes>
    </BrowserRouter>
    </>

  );
}

export default App;

Layout.js

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

export default function Layout() {
  return (
    <>
      <nav>
        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/blogs">Blogs</Link>
          </li>
          <li>
            <Link to="/contact">Contact</Link>
          </li>
        </ul>
      </nav>
      <Outlet />
    </>
  )
}

Outlet is the block where router components get loaded