Sharing layouts

Nested routing enables us to compose a page from a nested route hierarchy. In this section, we will utilize parent routes to reuse layouts between nested child routes. We will also learn how to share code between routes without creating new segments in the URL, with pathless layout routes.

Using parent layout routes

Let’s improve the look and feel of the BeeRich dashboard. Ideally, a user should be able to quickly switch between the income and expenses overview pages. It’s time to add a navigation bar.

We already utilized parent layout routes for the dashboard/expenses and dashboard/income pages. By rendering the list of expenses and income in a parent route (dashboard.expenses.tsx and dashboard.income.tsx, respectively), we nested the content of the child routes on the same page.

Now, we will take advantage of nested routing again to add a shared navigation bar to all dashboard pages. Follow these steps:

1. Create a dashboard.tsx file...