The answer
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.
What Is the Outlet Component in React Router and How to Use It
Why do my child routes not render anything even though they match?
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
Want to upskill yourself?
Your learning library
Small steps. Big possibilities.
Find your next course. Build something great.