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

Absolute vs Relative Paths

An absolute path starts with / and resolves from the root. A relative path has no leading / and resolves from the current route.

Notes

Type	Example	Inside `/root/products` resolves to
Absolute	`to="/products"`	`/products`
Relative	`to="details"`	`/root/products/details`
Up one level	`to=".."`	Depends on `relative` (below)

If the whole app lives under a parent path (e.g. /root), relative paths keep working when that parent changes.
.. goes up one level in the route hierarchy by default (relative="route"), which can skip several URL segments.
relative="path" makes .. remove one URL segment instead.
Prefer relative paths inside nested routes so code survives refactors.

What / Why / When

What: Two ways to resolve link targets.
Why: Relative paths make route trees portable.
When: Relative inside nested features; absolute for global links (logo, main nav).

Code compare

React

// Route tree: /root → products → :productId// Inside ProductDetailPage at /root/products/p1<Link to="..">Back</Link>                    // relative="route" (default): parent route → /root<Link to=".." relative="path">Back</Link>    // removes one segment → /root/products

Angular

<!-- Template: relative to the current route by default --><a routerLink="..">Back</a>

Angular

// Code: router.navigate is absolute unless you pass relativeToprivate router = inject(Router);private route = inject(ActivatedRoute);goBack() {  this.router.navigate(['..'], { relativeTo: this.route });}

Differences and gotchas

routerLink is relative to the current route automatically; router.navigate is relative only with relativeTo.
React's <Link to=".."> defaults to the route hierarchy, which surprises people when a child route has a multi-segment path. Use relative="path" when you mean "one URL segment up."

Quick reference

Task	React	Angular
Absolute	`to="/products"`	`routerLink="/products"`
Relative	`to="details"`	`routerLink="details"`
Up one route	`to=".."`	`routerLink=".."`
Up one segment	`to=".." relative="path"`	`router.navigate(['..'], { relativeTo })`