skip to content

In React Router, what does marking a route with index: true do, and at which URL does that route render?

level: juniorimportance: should knowfreq 55%

answer

  1. default child
  2. no path of its own
  3. parent's exact URL
  4. cannot have children

basics

~20 s

An index route (index: true, no path) is a parent's default child: it renders in the parent's <Outlet> when the URL matches the parent's path exactly, such as /dashboard. Index routes cannot have children of their own.

solid answer

~50 s

`index: true` (or `<Route index>`) marks a route as the **default child** of its parent. It has no `path`; it matches only when the URL is exactly the parent's path, and it renders in the parent's `<Outlet>`. So with `/dashboard` as the parent, the index route shows at `/dashboard`, while `settings` shows at `/dashboard/settings`. Without an index route, visiting `/dashboard` renders the parent with an empty outlet, because `useOutlet` returns `null` when no child matches. An index route at the top level renders at `/`. Index routes are leaves: React Router throws "Cannot specify children on an index route" in a data router and "An index route cannot have child routes." when converting JSX. The matcher also gives index routes a small score bonus, so they outrank alternatives such as a sibling splat at the parent's URL.

code

tsx · 17 lines
tsx
import { createBrowserRouter } from "react-router";
import Dashboard from "./Dashboard";
import DashboardHome from "./DashboardHome";
import Settings from "./Settings";
import Home from "./Home";

export const router = createBrowserRouter([
  { index: true, Component: Home }, // renders at "/"
  {
    path: "/dashboard",
    Component: Dashboard, // renders <Outlet />
    children: [
      { index: true, Component: DashboardHome }, // "/dashboard"
      { path: "settings", Component: Settings }, // "/dashboard/settings"
    ],
  },
]);

go deeper

for a junior

Remember the one-liner: index means default child, no path, renders in the parent's outlet at the parent's exact URL.

for a middle

Explain the mechanics: the index flag gives a ranking bonus, the router forbids children on it, and a missing index route leaves the outlet empty rather than failing the match.

for a senior

Use index routes to keep default content out of parent layouts, and spot duplicated index siblings or welcome content wrongly placed in the parent during code review.

for a principal

Set route-table conventions for a large app: every layout with children gets an explicit index route, so empty outlets and content leaking into layouts do not recur across teams.

## What an index route is A **route** in React Router is an entry in the route tree: a path pattern plus what to render. A **parent route** is one with `children`, and the component it renders shows the matched child through an `<Outlet>` element. An **index route** is a special child marked with `index: true` in a route object, or with the bare `index` prop on a JSX `<Route>`: - it has **no `path`** of its own, - it matches only when the URL is **exactly** the parent's path, - it renders in the parent's `<Outlet>`, like any other child. The usual description is "the default child route": the thing the parent shows when the URL does not go any deeper. ## Where it renders Take a parent at `/dashboard` with two children: an index route and a `settings` route. | URL | Parent renders? | What fills the parent's outlet | |---|---|---| | `/dashboard` | yes | the index route | | `/dashboard/settings` | yes | the `settings` route | | `/dashboard/unknown` | no match unless a splat or other route catches it | — | At the top level, an index route with no parent renders at `/`. That is the idiomatic way to write a home page inside a layout route, rather than giving a child `path: "/"`. If you leave the index route out, `/dashboard` still matches the parent, but its outlet renders nothing: `useOutlet` returns `null` when no child route matches. Teams sometimes "fix" the empty panel by moving welcome content into the parent component, which then also shows on every child page. The index route is the correct fix. ## Rules the router enforces 1. **Index routes are leaves.** In a data router, `createBrowserRouter` throws `Cannot specify children on an index route`; when JSX is converted with `<Routes>` or `createRoutesFromElements`, the invariant reads `An index route cannot have child routes.` If you need nested content under the default view, make it a normal child with a path, or put the layout on the parent. 2. **Index routes do not add a URL segment.** Because they have no `path`, they can never make the URL longer than their parent's. 3. **Index routes are preferred at the parent's URL.** React Router ranks every candidate branch with a score, and the pinned source adds a fixed bonus for `index: true`. That is why the index route outranks, for example, a sibling splat route when the URL is exactly the parent's path. ## Index route versus a pathless layout route Both lack a `path`, which is why they get confused: - An **index route** has `index: true`, renders at its parent's exact URL, and cannot have children. - A **layout route** has no `path` and no `index`; it adds a wrapper component around its children without adding a URL segment, and it *must* have children to be useful. In a route object the difference is literally the `index` flag. The shape of the tree around layout routes and outlets is a nested-routing topic; here the point is simply that `index: true` means "render me at my parent's URL", while a missing `path` alone means "wrap my children". ## Index routes in JSX The same rules hold when routes are written as JSX, in `<Routes>` or through `createRoutesFromElements`: `<Route index element={<DashboardHome />} />` is the index route, it carries no `path`, and giving it nested `<Route>` children trips the same invariant at conversion time. ## Common interview follow-ups - **Can there be more than one index route under one parent?** It is legal, but they tie on the same URL, and ties between siblings are broken by definition order, so only the first ever renders. Treat it as a bug. - **Why not just give a child `path: ""`?** The explicit `index` flag is the documented way to express the default child, reads unambiguously in route objects and JSX, and is what the ranking bonus applies to. - **Does an index route get its own loader in a data router?** Yes. It is a full route object and can carry `loader`, `action`, `errorElement` and `lazy` like any other. In an interview, the crisp answer is: "index means default child — no path, renders in the parent's outlet at the parent's exact URL, and it cannot have children."

  • What does the user see at /dashboard if the dashboard route has children but no index route?
    The dashboard parent still matches and renders, but its `<Outlet>` renders nothing, because `useOutlet` returns `null` when no child route matches. Adding an index route gives that URL a default view without putting content into the parent that would also appear on every child page.
  • Why can an index route not have children?
    An index route is defined as the leaf that fills its parent's outlet at the parent's exact URL, and it adds no path segment, so there is no URL at which a child of it could match differently. React Router enforces this with an invariant in both the route-object and JSX conversion paths.

saying these in an interview costs you the question

  • An index route needs path="/" to render at the parent URL
  • Without an index route the parent route does not match at all
  • Index routes can hold nested children like any other route
  • Index and pathless layout routes are the same thing
  • An index route adds an extra segment to the URL