Browse History in Tanstack Router

In this lesson, we explore how TanStack Router integrates with the native browser history API to manage navigation.

As we navigate through different routes, the URL changes are stored in the browser's history, allowing users to use the forward and backward buttons to traverse their navigation history.

This functionality also enables permalinks, meaning users can copy and paste URLs to access specific routes directly.

Additionally, we learn how to programmatically interact with the history object to move forward or backward through the navigation stack, enhancing the user experience by providing full control over navigation actions.

This compatibility with the native history API ensures that TanStack Router applications behave similarly to traditional websites, offering a seamless and intuitive user experience.

Transcript

[00:00] Using 10-Stack Router we should be aware that this solution is corresponding to the underlying history API. So when I'm walking across various routes and this address in the address bar changes, then it's being stored in the history API which we're going to see in a while. So I'm just randomly clicking some of these links just to make these addresses here change and we can essentially use the history buttons over here and this means that if we walk into this page in a different tab then we're going to walk into this exact address even though this application is a purely client-side application. That means that this is a permalink that we can essentially copy and paste somewhere else. So not only we can basically travel across the history but we can also do anything that we want with the history object over here.

[01:00] So for instance what we can do is to move backwards, programmatically, right over here, or I can move forward. Or if I want, I can go backward two steps or go forward three steps. So essentially, TestSecRouter is fully compatible with the native history API.