Building a Multi-Page SPA with React RouterEntry 20 of 20
Summary
| Concept | React Router | Angular Router |
|---|---|---|
| Create router | createBrowserRouter(routes) | provideRouter(routes) |
| Render router | <RouterProvider router={router} /> | <router-outlet /> |
| Component for path | element | component / loadComponent |
| Nested layouts | children + <Outlet /> | children + <router-outlet /> |
| Default child | index: true | path: '', pathMatch: 'full' |
| Catch-all | path: '*' | path: '**' |
| Link | <Link to> | routerLink |
| Active link | <NavLink> + end | routerLinkActive + exact: true |
| Navigate in code | useNavigate() | Router.navigate() |
| Path params | useParams() | input() / ActivatedRoute.paramMap |
| Query params | useSearchParams() | input() / ActivatedRoute.queryParamMap |
| Pre-render data | loader + useLoaderData() | resolve + input() |
| Parent data in child | id + useRouteLoaderData(id) | paramsInheritanceStrategy: 'always' |
| Loading state | useNavigation() | Router events |
| Errors | errorElement + useRouteError() | Error route + RedirectCommand / ErrorHandler |
| Mutations | action + <Form> | Reactive form + service |
| Redirect from data code | redirect() | RedirectCommand / router.navigate() |
| Submit from code | useSubmit() | Component method + service |
| Action result | useActionData() | Component signals |
| No-navigation update | useFetcher() | Service call from component |
React Router's Data API turns routing into a data layer: loaders act like Angular resolvers, actions and <Form> handle mutations, and errorElement adds route-scoped error boundaries. Angular reaches the same architecture with resolvers, services, and reactive forms, keeping HTTP in injectable services and form logic in components.