React Router

Subject: React

Routing in React Router v6 (Core Concepts)

React Router helps manage navigation between different pages in a Single Page Application (SPA). It updates the UI without reloading the full page.

✅ 1. Installation

🚀 Try it in Compiler

🧱 2. Basic Setup

🚀 Try it in Compiler

🧾 Explanation

TermDescription
BrowserRouterProvides routing context using the browser history API
RoutesWrapper for all Route definitions
RouteMaps a path (URL) to a component (element)
path="*"Wildcard route for handling 404s (NotFound page)

🌐 3. Creating Pages

🚀 Try it in Compiler

🔗 4. Navigation Between Pages

🚀 Try it in Compiler
ComponentPurpose
LinkNavigates between routes (no page reload)

🧠 Summary (Routing Concepts)

FeatureReact Router v6 Syntax
Routes container<Routes>
Route matchingExact by default
Wildcard routepath="*"
Navigation<Link to="...">
Nested RoutesFully supported

🔄 Part 2: React Router v6 Hooks (useNavigate, useParams, etc.)

Hooks make navigation and route data access easier in functional components.

📍 1. useNavigate()

Navigate programmatically (e.g., after a button click):

🚀 Try it in Compiler

🗺️ 2. useParams()

Access dynamic route parameters:

🚀 Try it in Compiler

Used like:

🚀 Try it in Compiler

📌 3. useLocation()

Access info about the current route (URL, search, hash, etc):

🚀 Try it in Compiler

📤 4. useSearchParams()

Handle query strings (like ?sort=asc&page=2):

🚀 Try it in Compiler

URL Example: /products?sort=asc

🔚 Wrap-Up

🔗 Routing handles:

  • URL to component mapping
  • Navigation links
  • Wildcard route handling (404)
  • Layouts & nested routing

🧪 React Router Hooks:

HookPurpose
useNavigate()Redirect programmatically
useParams()Access dynamic route values
useLocation()Get info about the current URL
useSearchParams()Work with query strings

React Router v6 makes routing in React apps simple, powerful, and flexible for both beginners and advanced developers.

Next: State Mgmt