Composing pages from nested routes

BeeRich is a personal bookkeeping application. Users should be able to view their expenses and sources of income. In this section, we will create a hierarchy of nested routes to compose the dashboard pages of BeeRich.

So far, we have seen Outlet being used in the root.tsx file. The Outlet component declares the location of the child route inside the markup of the parent route. The Outlet component in root.tsx is rendered inside the HTML body. Hence, all child routes are wrapped inside the body element. This is the power of nested routing. With nested routing, you can compose pages out of several route modules.

Let’s use nested routing and the Outlet component to construct our dashboard. The two routes, /dashboard/expenses and /dashboard/income, will serve as our overview pages:

1. First, add two files inside the routes folder:
   • dashboard.expenses.tsx
   • dashboard.income.tsx

   Note that we use dot delimiters (.) to separate path segments ...