SPA routing: React Router & route guards

Full reload vs client transition

A normal <a href> asks the browser for a new HTML document. React state, Redux stores, and Query caches restart.

A client router updates the URL and swaps the matched component tree while the JS runtime stays alive — drafts and caches can survive when that is intentional.

// Full document navigation
<a href="/tickets">Tickets</a>

// SPA navigation (react-router-dom)
import { Link } from "react-router-dom";
<Link to="/tickets">Tickets</Link>

// Wrong inside an SPA shell
<a href="/dashboard">Dashboard</a>

// Right
<Link to="/dashboard">Dashboard</Link>

How React routes with react-router-dom

Install react-router-dom in a SPA (Vite/CRA). Wrap the app once in BrowserRouter (or createBrowserRouter + RouterProvider in data APIs).

Declare a route tree with Routes and Route. Declarative Link navigates on click. useNavigate() navigates after an event (login success, form submit). useParams / useSearchParams read URL state.

Nested routes use an Outlet so a layout can wrap child pages — the same idea as Next layouts, different API.

import { BrowserRouter, Routes, Route, Link, useNavigate, useParams } from "react-router-dom";

function App() {
  return (
    <BrowserRouter>
      <nav>
        <Link to="/">Home</Link>
        <Link to="/tickets">Tickets</Link>
      </nav>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/tickets" element={<TicketList />} />
        <Route path="/tickets/:id" element={<TicketDetail />} />
        <Route path="*" element={<NotFound />} />
      </Routes>
    </BrowserRouter>
  );
}

function TicketDetail() {
  const { id } = useParams();
  return <h1>Ticket {id}</h1>;
}

function AfterCreate() {
  const navigate = useNavigate();
  async function onSubmit(e) {
    e.preventDefault();
    const ticket = await createTicket(data);
    navigate(`/tickets/${ticket.id}`);
  }
  return <form onSubmit={onSubmit}>…</form>;
}

// Wrong
function Page() {
  const navigate = useNavigate();
  navigate("/tickets"); // side effect in render
  return null;
}

// Right — after an event or completed async work
<button type="button" onClick={() => navigate("/tickets")}>Open</button>

Public vs private routes

A public route renders for everyone: login, marketing, password reset, health status.

A private (protected) route requires proof of auth before showing the page. The usual pattern is a wrapper component that reads session state and either renders <Outlet /> / children or redirects to /login with a return URL.

Auth truth still comes from the server (Nest cookie/session). The guard only controls what the client UI shows; Nest must still reject unauthorized API calls.

import { Navigate, Outlet, useLocation } from "react-router-dom";

function ProtectedRoute({ isAuthenticated }: { isAuthenticated: boolean }) {
  const location = useLocation();
  if (!isAuthenticated) {
    return <Navigate to="/login" replace state={{ from: location }} />;
  }
  return <Outlet />;
}

// Route tree
<Routes>
  <Route path="/login" element={<LoginPage />} /> {/* public */}
  <Route element={<ProtectedRoute isAuthenticated={!!user} />}>
    <Route path="/tickets" element={<TicketList />} /> {/* private */}
    <Route path="/pulse" element={<Pulse />} />
  </Route>
</Routes>

// After login — send user back
const from = location.state?.from?.pathname ?? "/tickets";
navigate(from, { replace: true });

// Wrong — hide the page but still call Nest without a session
if (!user) return null;
return <AdminPanel />; // API still callable if URL is known

// Right — guard UI AND rely on Nest 401/403
<ProtectedRoute />
// Nest JwtAuthGuard rejects missing/invalid cookies

Bridge to this monorepo (Next)

Here, Next App Router owns product routing: folders under src/app, Link from next/link, useRouter from next/navigation.

The mental model is the same: declarative links for clicks, imperative navigate after events, layouts for shared chrome, and auth-aware redirects for private areas.

Do not install react-router-dom beside Next in apps/web — one router per app.

import Link from "next/link";
import { useRouter } from "next/navigation";

<Link href="/tickets">Tickets</Link>
router.push(`/tickets/${id}`);

Keep in mind

• Public = anyone; private = auth check then Outlet (or Next redirect).
• URL should be bookmarkable for filters and entity ids.
• Learn React Router for SPA jobs; use Next routing inside this repo.
• preventDefault on SPA forms so the document does not reload.