React Router nested route shows an empty child page: check children and Outlet

You navigate to /settings/profile, but only the shared menu appears; the profile area is blank. If you defined the child route under children, the parent component also needs a place to render it. In React Router, that place is <Outlet />. Check URL matching and render placement separately.

children defines the route; Outlet provides its place on screen

Even when the profile child path matches, its page cannot appear without an Outlet in the parent layout. Route selection and render placement are separate checks.

This small route tree uses React Router Data Mode. The parent path /settings owns the shared layout, and its profile child owns the profile content.

import { createBrowserRouter, Outlet } from 'react-router';
import { RouterProvider } from 'react-router/dom';

function SettingsLayout() {
  return (
    <main>
      <h1>Settings</h1>
      <nav>Settings menu</nav>
      <Outlet />
    </main>
  );
}

function Profile() {
  return <p>Profile settings</p>;
}

const router = createBrowserRouter([
  {
    path: '/settings',
    element: <SettingsLayout />,
    children: [{ path: 'profile', element: <Profile /> }],
  },
]);

export default function App() {
  return <RouterProvider router={router} />;
}

At /settings/profile, the parent layout renders first, and Profile appears where <Outlet /> sits. Remove the Outlet and the child has no render location even though children exists. Conversely, an Outlet with no matching child has nothing to display. The React Router Outlet reference specifies this behavior.

What should you check when the URL is right but the page is blank?

First confirm that the URL combines the parent and child paths as /settings/profile. Next check that profile is actually in the parent's children array. Finally, verify that the rendered parent component includes <Outlet />; conditional rendering might hide it even when the source contains one.

The example uses a relative child path, without a leading /. When a codebase mixes absolute and relative paths, test the final URL instead of assuming the intended nesting. If /settings itself needs default content, add an index child route. An empty Outlet at the parent URL is not automatically a bug.

Keep shared layout responsibilities clear

The parent layout is a useful home for a title, menu, or boundary shared by several child pages. Putting every child-specific loader or error handler in that parent makes even small page changes affect shared code. Decide what every child really shares, and leave the rest with the child route.

Test both direct navigation to /settings/profile and navigation through an in-app link. If only direct navigation fails, inspect the server's SPA route handling as well as React Router. Separate route matching, the Outlet render location, and the server response to find the cause.

Key takeaways: a nested route needs a render location

children defines child routes, while <Outlet /> marks where the selected child appears inside its parent. When a URL matches but only the parent displays, check the child route match and whether the parent actually renders the Outlet.