Access Dynamic Route Parameters with useParams in Tanstack Router

In this lesson, we learn how to access dynamic route parameters using the useParams hook in TanStack Router.

When used with a specific Route object, useParams provides type-safe access to route parameters, ensuring that TypeScript knows the exact types of these parameters.

This approach eliminates the possibility of undefined/optional values, making it safer for accessing parameters like employeeId.

However, when using useParams globally without specifying a route, it requires an options object with { strict: false }, which reduces type safety.

In this case, the hook can access parameters from any route in the application, but it does not guarantee their existence or type. This flexibility allows components to be reused across different routes, but it requires careful handling of potential errors.