The One Question That Prevents Most React Router Layout Bugs

Nested-route layout bugs are among the most common React Router mistakes because the framework silently renders parent UI into every child. Knowing the rule—"if it doesn't belong on every child page, it doesn't belong in the parent"—eliminates an entire class of layout regressions before they reach QA.

A common React Router mistake puts shared UI in a parent layout component and then discovers it bleeding into child pages that shouldn't display it. The `<Outlet />` slot renders the matched child route inside the parent, but the parent's own markup—headings, sidebars, navigation—renders unconditionally for every child. The fix is a placement rule: parent routes hold only the framework that every single child needs; page-specific UI belongs in the child component itself.

When a piece of UI appears on a page where it makes no sense, the diagnostic is straightforward. The parent component treats all children equally and has no mechanism to selectively hide its markup. Moving that UI into the specific child component that requires it eliminates the leak. If duplication emerges later across multiple children, the UI can be lifted back into the parent—the same mental model as lifting state.

The article walks through a concrete example of an e-commerce admin where a "Product List" heading shows up on the "Add New Product" form. The solution is a one-line move, but the underlying principle generalizes to every nested-route layout decision in React Router.