React Router — navigation without the white flash — Visualize

React Router — navigation without the white flash

Act 1: the old web tears the page down. Act 2: pushState, a path matcher, and a component swap — the server never hears about it.

💡

THE BIG IDEA

Click a link on a classic website and the whole world is torn down and rebuilt — state, scroll, everything. Click the same link in a React app and only the middle of the screen changes, instantly, while the URL still updates and the back button still works. This theatre stages both acts and lands the honest fine print: first loads are real, deep links need deploy config, and page DATA still has to dodge the fetch race.

Press ▶ Play to watch it run step by step, or use the arrow buttons to go at your own pace.

ACT 1 — the web before SPAs. You are reading a page, you click "Jobs". Watch what it costs.

A plain <a href="/jobs"> hands full control to the browser. No JavaScript of yours survives what happens next.

👆You click a link

🔗<Link to="/jobs">

🌐Browser (URL bar + history)

🧭Router — path matcher

🗺️Route table

📄<JobsPage/> renders

🏢Serverthe old web

handling requestunder loadhealthyjust added

1/10

UP NEXT IN REACT

One click, one re-render — how React changes the screen

Follow a single click from setState to the one DOM node that actually changes.

useRef — the box that changes without redrawing One click, one re-render — how React changes the screen