❮ Previous Next ❯

Basic Routing

  • This lesson introduces basic routing in React and explains how to navigate between different pages using React Router.

  • Basic Routing

    BrowserRouter

    BrowserRouter is the router container that wraps the entire app.

    Example:

import { BrowserRouter } from "react-router-dom";

<BrowserRouter>
  <App />
</BrowserRouter>

  • Uses HTML5 history API.

    Routes and Route

    Routes defines all routes.
    Route maps a path to a component.

    Example:

import { Routes, Route } from "react-router-dom";

<Routes>
  <Route path="/" element={<Home />} />
  <Route path="/about" element={<About />} />
</Routes>
  • When URL matches, the component renders.

    Link and NavLink

    Link

    Used for navigation without page reload.

<Link to="/about">About</Link>

  • NavLink

    Like Link, but adds active styling.

<NavLink to="/about">About</NavLink>
  • Perfect for navigation menus.
❮ Previous Next ❯