Create Nested Route and Nested Outlets in Tanstack Router

In this lesson, we learn how to create nested routes and outlets in TanStack Router using file-based routing.

We start by creating a new employees directory and files to represent nested routes, such as /employees/$employeeId. The $ symbol is used to denote dynamic parameters.

We then use the <Link> component from TanStack Router to create links to these nested routes, passing necessary parameters.

To render the nested content, we use the <Outlet> component (nested), which automatically renders child routes. This approach allows us to dynamically display stuff under a nested route.

All the time, the TanStack Router generator automatically updates the route tree based on file changes - our routing configuration remains consistent 🔥