How Single Page Application (SPA) Magic Works

In the old internet (MPA), moving to another page was like moving to another city: you pack your things, close everything, go to the address, and build everything from scratch at the new place. It's slow, and the browser " flashes " with a white screen.

In React, everything is different. Your application is one endless room. When you press " another page " , a team of invisible builders (React Router) instantly changes the decorations around you. You don't go anywhere, but the surroundings became different.

1. Why Do We Need a Router?

If we can just change components via if (page === 'about'), why do we need a whole library?

URL synchronization: The user must be able to copy a link /contacts and send it to a friend. Without a router, the link would always be just google.com, and the friend would open the main page.
** " Back " and " Forward " buttons:** The router teaches React to be friends with browser history.
Search engines (SEO): So Google understands your site has many sections, not one empty page.

2. Main Toolset

BrowserRouter (The whole world): Main container that watches the address bar. Usually wraps the entire application in main.jsx.
Routes (Road map): List of all possible paths.
Route (Specific path): " If the address says /users, show the UsersList component " .
Link (Teleport): This is a replacement for the regular <a> tag. It tells the browser: " Don't you dare reload the page! Just quietly change the URL and let React Router change the decorations " .

3. Why <a> Is the Enemy?

When you press a regular link <a href="/about">:

Browser unloads your entire React application from memory.
All your data in useState (shopping cart, text in fields) is erased.
Browser downloads all scripts again and runs them from scratch. Link makes the transition instant, keeping all your data intact.

Routing in React is managing user attention. We don't change documents, we change components, maintaining the feeling of seamlessness.