Structuring Route-Based Screens in a React App

Structuring Route-Based Screens in a React App

Route-based screens need structure to stay maintainable. Here is how to structure them cleanly with React Router.

One Page Component Per Route

Each route maps to one page component. Page components compose the layout, the feature components, and the data fetching for that screen.

Pages Are Thin

Page components should be thin coordinators. They compose other components and manage the page-level state, but the real logic lives in feature components and hooks.

Use Nested Routes for Layouts

For a shared layout, use nested routes with a layout component as the parent and pages as children. The matched child renders in the Outlet, and the layout stays mounted.

Group Routes by Feature

In the routes definition, group routes by feature. This makes the app's structure visible at a glance and helps new contributors understand the app quickly.

Use Protected Routes

Wrap routes that require login in a ProtectedRoute component. This keeps auth logic in one place instead of repeating it on every page.

Handle 404s and Errors

Always add a catch-all 404 route. Consider an error boundary for route components that might fail, so users see a fallback instead of a blank screen.

The Takeaway

Structure route-based screens with one page per route, thin page components that coordinate, nested routes for shared layouts, routes grouped by feature, protected routes for auth, and a catch-all 404 plus error boundaries.