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