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

Index Routes and Catch-All Routes

An index route is the default child rendered when the parent's path matches exactly. A catch-all route (path: '*') matches any URL no other route matches.

Notes

  • { index: true, element: <HomePage /> } replaces { path: '' } and is the idiomatic default child.
  • Index routes have no path and no children.
  • path: '*' renders a 404 page for unknown URLs.
  • errorElement (Entry 13) and * are different: errorElement also catches unknown URLs at the root if there's no * route, but its main job is catching thrown errors.

What / Why / When

What

Default and fallback routes.

Why

Every URL renders something meaningful.

When

Every parent with a default view; always one * route.

Code compare

React
const router = createBrowserRouter([  {    path: "/",    element: <RootLayout />,    errorElement: <ErrorPage />,    children: [      { index: true, element: <HomePage /> }, // renders at "/"      { path: "products", element: <ProductsPage /> },      { path: "*", element: <NotFoundPage /> }, // any unmatched URL    ],  },]);
Angular
export const routes: Routes = [  {    path: "",    component: RootLayoutComponent,    children: [      { path: "", component: HomeComponent, pathMatch: "full" },      { path: "products", component: ProductsComponent },      { path: "**", component: NotFoundComponent },    ],  },];

Differences and gotchas

  • Angular needs pathMatch: 'full' on empty-path routes to avoid matching every URL. React's index: true handles this.
  • React's catch-all is *; Angular's is **.

Quick reference

ReactAngular
{ index: true, element }{ path: '', pathMatch: 'full', component }
{ path: '*' }{ path: '**' }