Routing Is Needed in SPA

• URL changes do NOT reload the page
• For different URL, React decides which component to show.

/           → <Home />
/about      → <About />
/profile    → <Profile /> 
// All inside <div id="root"></div>

Routing Works Internally;

[User clicks <Link> / useNavigate called]
            ↓
   BrowserRouter listens
            ↓
   Check <Routes> → match <Route path>
            ↓
  Render matched component in <div id="root">
            ↓
React updates Virtual DOM → minimal real DOM changes

Install React Router

npm install react-router-dom

This gives you:

• <BrowserRouter> → listens to URL changes, provides routing context
• <Routes> → wrapper for all <Route>
• <Route> → maps URL → component
• Navigation hooks (useNavigate, useParams)