Building a Multi-Page SPA with React RouterEntry 3 of 20

Navigating with `<Link>`

<Link to="..."> performs client-side navigation. It renders an <a> but prevents the full page reload.

Notes

A plain <a href> reloads the whole app, loses state, and re-downloads the bundle.
<Link> updates the URL and renders the matching route instantly.

What / Why / When

What: Declarative navigation.
Why: Keeps the SPA running; preserves state.
When: Every internal link. Use <a> only for external URLs.

Code compare

React

import { Link } from "react-router";export default function HomePage() {  return (    <>      <h1>My Home Page</h1>      <p>        Go to <Link to="/products">the list of products</Link>.      </p>    </>  );}

Angular

@Component({  selector: "app-home",  imports: [RouterLink],  template: `    <h1>My Home Page</h1>    <p>Go to <a routerLink="/products">the list of products</a>.</p>  `,})export class HomeComponent {}

Quick reference

React	Angular
`<Link to="/products">`	`<a routerLink="/products">`
to={`/products/${id}`}	`[routerLink]="['/products', id]"`