React · Lesson 8 of 8

Routing, deploying, what is next

10 min readUpdated 24 Jun 2026

Your app has more than one screen. The user clicks "Cart", the URL changes, a new view shows, the page does not flash white. Welcome to client-side routing.

After that, you put it on the internet. Both are easier in 2026 than they have ever been.

Client-side routing in one paragraph

A normal <a href> causes the browser to throw away your entire app and load a fresh HTML page. Client-side routing intercepts the click, updates the URL via the History API, and swaps which component renders. Same React app, new view, no full reload. Faster, and your state survives the transition.

React Router, the default if you are not on Next

For a plain Vite + React app, install react-router-dom. It is the boring correct answer.

jsx

import { BrowserRouter, Routes, Route, Link } from 'react-router-dom';
 
<BrowserRouter>
  <nav>
    <Link to="/">Home</Link>
    <Link to="/cart">Cart</Link>
  </nav>
  <Routes>
    <Route path="/" element={<Home />} />
    <Route path="/cart" element={<Cart />} />
    <Route path="/r/:id" element={<Restaurant />} />
  </Routes>
</BrowserRouter>

:id is a URL param, read inside Restaurant with useParams(). That is most of what you need.

React Router vs Next.js

The decision is less religious than the internet makes it sound.

React Router: you have a Vite SPA, you want full control, you do not need SEO, the backend is somebody else's problem. Dashboards, internal tools, admin panels.
Next.js: you want server-side rendering for SEO, file-based routing, an API in the same project, server components, easy deploy. Marketing sites, ecommerce, anything users find on Google.

Most "should I learn Next.js?" questions are really "do my pages need to be indexable by Google?". If yes, Next. If no, React Router is lighter and fine.

Next.js is React with batteries. React Router is React with a router. Both ship in 2026; pick by what your app actually needs.

What "deploy" means in 2026

You do not rent a server. You push a git branch, a platform builds and hosts.

Vercel: built by the Next.js team. Push to GitHub, live in 90 seconds. Free tier is generous.
Netlify: same story, framework-agnostic, slightly better for static sites.
Cloudflare Pages: fastest edge network, generous free tier, great if you want workers later.

For a Vite app: npm run build, point the platform at the dist folder. For Next.js: it just works.

bash

# Vite
npm run build
# dist/ goes to the host
 
# Next.js
# git push, Vercel handles it

Your custom domain (mybiryani.in from GoDaddy) hooks up in five clicks. SSL is automatic.

What to learn next

You now have the React core. From here, pick based on what you are building.

TypeScript with React. Not optional past a side project. Catches half your bugs at compile time.
TanStack Query. Already covered, worth a full read.
A component library: shadcn/ui is the pick in 2026. Copy-paste components, no bloat.
Forms: react-hook-form + zod.
Testing: Vitest + React Testing Library. Playwright for end-to-end.
Server-side React: Next.js App Router and Server Components, when you are ready for them.

The honest close

You have read eight short lessons. You know enough to build a real app and ship it. The rest is reps. Pick a project (a Swiggy clone, a personal expense tracker, an IRCTC PNR checker), build it badly, fix it, ship it.

That is the whole loop. See you in code review.

Free tools you can use while you learn

Chai0/1 done

Watching quietly. Tap me if you want a tip.

React Playground

preview

Try this (0 of 1 done)

Add a third page "Contact" with a button to switch to it.

show answer

function App() {
  const [page, setPage] = React.useState('home');
  return (
    <div>
      <nav>
        <button onClick={() => setPage('home')}>home</button>{' '}
        <button onClick={() => setPage('about')}>about</button>{' '}
        <button onClick={() => setPage('contact')}>contact</button>
      </nav>
      <hr />
      {page === 'home' && <h3>Home</h3>}
      {page === 'about' && <h3>About</h3>}
      {page === 'contact' && <h3>Contact</h3>}
    </div>
  );
}