The answer
Often in the layout. The layout knows whether to render protected UI or redirect to login, since it wraps every page. This centralizes auth checks instead of repeating them on every page.
How to Design a React App Layout From Scratch
Where do auth checks go in a React layout?
More FAQs in How to Design a React App Layout From Scratch
Identify the persistent UI like the header and sidebar, build a Layout component with an Outlet for page content, use nested routes for children, plan responsive behavior early, keep the shell simple, and handle layout-level concerns like auth.
A component that renders the persistent UI like header and sidebar, plus an Outlet where page content goes. Every page uses this shell, so the shared UI lives in one place instead of being repeated on every page.
So the layout is the parent and pages are children. The matched child renders in the Outlet, and the parent stays mounted across navigations, preserving its state and avoiding re-mounting the layout on every page change.
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.