Course

Up and Running with Tanstack Router and React

Learn TanStack Router for React: set up apps, use file-based routing, manage routes, and boost app performance.

TanStack Router is the foundation for TanStack Start, which is gaining significant attention due to its innovative approach to application development.

This course focuses on getting effective TanStack Router, a modern and scalable routing solution for React applications. You will learn how to:

  • set up and scaffold new applications,
  • use file-based routing
  • create nested routes
  • manage dynamic route parameters and more.

The course covers advanced features like route loaders, caching strategies, and lifecycle hooks, which are crucial for enhancing application performance and user experience.

By understanding TanStack Router, you can build more efficient, type-safe, and maintainable applications, leveraging its integration with data fetching libraries like TanStack Query.

This knowledge is essential for developers looking to improve their routing skills and stay ahead in the field.

Lessons
16

Lessons

  1. 01WTF is Tanstack Router
  2. 02Scaffold new application with Tanstack Router
  3. 03Use File-Based Routing in Tanstack Router
  4. 04Create a new Route in Tanstack Router
  5. 05Troubleshoot Tanstack routeTree.gen Generator
  6. 06Use Loader to Feed a Route with Data in Tanstack Router
  7. 07Preload Routes in Tanstack Router
  8. 08Cache Route Loader Data in Tanstack Router
  9. 09Configure staleTime and gcTime in Tanstack Router
  10. 10Create Nested Route and Nested Outlets in Tanstack Router
  11. 11Parametrize Route Loader for Nested Route in Tanstack Router
  12. 12Reorganize File-Based Routes in Tanstack Router
  13. 13Access Dynamic Route Parameters with useParams in Tanstack Router
  14. 14Provide NotFoundComponent at Nested Route or Global Level in Tanstack Router
  15. 15Hook into Route Lifecycle Hooks in Tanstack Router
  16. 16Browse History in Tanstack Router