Welcome to this step-by-step guide to learn React Router (v6+) with simple code and deep explanation.
If you’re just starting with React and want to build multiple pages in a single app, this blog is perfect for you 👇
✅ What is React Router?
React Router is a library that helps you navigate between different pages in a React app ⇢ like Home, Products, About, or Contact ⇢ without refreshing the page.
This gives a smooth SPA (Single Page Application) experience.
So instead of loading a new HTML page each time, it updates just the content.
📂 Project Folder Structure
Before we begin, let’s understand the folder structure:
src/
├── assets/
│ └── hk_logo.png # Logo image used in Navbar
├── components/
│ └── Navbar.jsx # Top navigation bar
├── layout/
│ └── RootLayout.jsx # Main layout wrapper (includes Navbar + Outlet)
├── pages/
│ ├── Home.jsx # Home page
│ ├── Products.jsx # Products page
│ ├── About.jsx # About page
│ └── Contact.jsx # Contact page
├── App.jsx # Route configuration
└── main.jsx # React app entry point
└── index.css # React app global styles
🔧 STEP 1 ➤ Create the Navbar
👉 File: src/components/Navbar.jsx
import React from 'react'
// importing logo image from assets folder
import hk_logo from '../assets/hk_logo.png'
// importing Link component to create page links
import { Link } from 'react-router-dom'
const Navbar = () => {
return (
<div className='navbar'>
{/* Display the logo */}
<img src={hk_logo} alt="logo" width="100px" height="60" />
{/* Navigation links */}
<ul>
<Link to="/"><li>Home</li></Link>
<Link to="/products"><li>Products</li></Link>
<Link to="/about"><li>About</li></Link>
<Link to="/contact"><li>Contact</li></Link>
</ul>
{/* CTA button */}
<button>Get Started</button>
</div>
)
}
export default Navbar
✔️ hk_logo is an image file (you can add your own PNG or JPG inside /assets)
✔️ We use <Link to="..."> instead of <a href="..."> to avoid full page reload
✔️ Clicking a link updates the route and changes page content dynamically
🧱 STEP 2 ➤ Create Root Layout
👉 File: src/layout/RootLayout.jsx
The layout file wraps all pages inside the same structure.
We keep common parts like the Navbar at the top, and page content is loaded below it using <Outlet />.
import React from 'react'
// Importing Navbar that will show on every page
import Navbar from '../components/Navbar'
// Outlet is used to render matched route's child component
import { Outlet } from 'react-router-dom'
const RootLayout = () => {
return (
<div>
<Navbar />
{/* Page content goes here */}
<div className='container'>
<Outlet />
{/* For example: Home.jsx will be shown when path is / */}
</div>
</div>
)
}
export default RootLayout
🧠 Outlet works like a placeholder ⇢ it will render the matching route’s component (like Home, Products, etc.)
⚙️ STEP 3 ➤ Setup Routes in App.jsx
👉 File: src/App.jsx
Here we define all the routes and tell React which component to show on each URL.
import React from "react"
// Importing all the pages
import Home from "./pages/Home"
import Products from "./pages/Products"
import About from "./pages/About"
import Contact from "./pages/Contact"
// Importing layout
import RootLayout from "./layout/RootLayout"
// React Router imports
import {
createBrowserRouter,
createRoutesFromElements,
Route,
RouterProvider
} from "react-router-dom"
const App = () => {
// Creating router with all route settings
const router = createBrowserRouter(
createRoutesFromElements(
// Root route - it wraps all other routes with layout
<Route path="/" element={<RootLayout />}>
{/* index means base URL '/' */}
<Route index element={<Home />} />
<Route path="products" element={<Products />} />
<Route path="about" element={<About />} />
<Route path="contact" element={<Contact />} />
</Route>
)
)
return (
// Providing the router to the app
<RouterProvider router={router} />
)
}
export default App
🔹 createBrowserRouter is the modern way of defining routes
🔹 Route path matches the URL and shows the correct component
🔹 All these pages will be rendered inside RootLayout, which includes the Navbar
🚀 STEP 4 ➤ Setup Entry Point in main.jsx
👉 File: src/main.jsx
This is where React starts your app and renders everything into the browser.
import { createRoot } from 'react-dom/client'
// Importing global styles
import './index.css'
// Importing main App
import App from './App.jsx'
// Attaching App to root element in index.html
createRoot(document.getElementById('root')).render(
<App />
)
🧠 This file is like the engine starter ⇢ it loads your app inside the <div id="root"></div> in public/index.html
🎨 STEP 5 ➤ Add Global Styles in index.css
👉 File: src/index.css
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'poppins', sans-serif;
}
a {
text-decoration: none;
color: inherit;
}
/* --- Navbar --- */
.navbar{
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px 8%;
}
.navbar ul{
padding: 10px 30px;
border-radius: 30px;
box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.1);
}
.navbar ul li{
display: inline-block;
padding: 5px 10px;
margin: 0 10px;
}
a.active {
color:brown;
}
.navbar button{
background: #000;
color: #fff;
padding: 12px 25px;
border: 0;
outline: 0;
border-radius: 30px;
font-size: 16px;
cursor: pointer;
}
/* --- Content Container --- */
.container{
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 80vh;
}
.container h1{
font-size: 70px;
font-weight: 500;
}
✔️ index.css is already imported in main.jsx like this:
import './index.css'
🧪 Optional: Create Basic Page Components
Example: src/pages/Home.jsx
import React from 'react'
const Home = () => {
return (
<h1>Welcome to Home Page</h1>
)
}
export default Home
Do the same for Products, About, and Contact pages.
🎯 Summary of What You Did:
🔹 Imported image and links in Navbar
🔹 Used Link to switch between pages without reload
🔹 Used Outlet inside RootLayout to render child routes
🔹 Used createBrowserRouter to define modern routes
🔹 Wrapped everything inside RouterProvider
🎁 Bonus Tip ➤ Add a 404 Page
To handle unmatched routes (like a broken URL), you can add:
<Route path="*" element={<NotFound />} />
✅ Make sure you create a NotFound.jsx file inside /pages folder
✅ Place this route at the bottom inside <Route> list
🖼 Sample Output
When you run this app and go to /about, you’ll see:
- Top Navbar remains the same
- Page content updates to About Page
💡 Final Thought
React Router is a very useful tool to navigate between pages without reloading the site.
Once you understand layout + routes + outlet, you can build full websites easily!
Keep building! You’re doing great 💪
🧠 Made with ❤️ by Himanay Khajuria
🔗 Follow for more beginner-friendly frontend content!
Top comments (0)