Zum Inhalt springen

🌐 React Router Beginner Guide – New Way to Setup 🧭

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!

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert