Why do my child routes not render anything even though they match?
Usually because you forgot to add the Outlet in the layout component. Without an Outlet, child routes have nowhere to render, so nothing appears even though the route matches and the parent renders.
Verify This Answer
Cross-check this information using these trusted sources:
More FAQs in What Is the Outlet Component in React Router and How to Use It
Outlet is a placeholder in a parent route's component where the matching child route renders. The parent renders the shared layout, and the child renders inside the Outlet, so you define the layout once for all child pages.
Without Outlet, you would repeat the header, sidebar, and footer in every page. Outlet lets you define the layout once and let child pages render inside it, which keeps your code DRY and the layout consistent.
Create a layout component that renders the shared UI and an Outlet, then define it as the element of a parent route and nest child routes inside that parent. The matched child renders in the Outlet.
Still have questions?
Browse all our FAQs or reach out to our support team