Expose navigation action type (PUSH, REPLACE, BACK, FORWARD, or GO) in router state and loaders.

[YakuBrangJa]

Router internally knows how a navigation was performed (PUSH, REPLACE, BACK, FORWARD, or GO) But the value is not accessible through router.state, beforeLoad, or loader functions.

Use case
Example a newsfeed route with an infinite query: const feedQuery = useInfiniteQuery(postQueries.feed())
I want the following behavior:

• User navigates back to the feed using the browser's Back button → restore the previous cached query state (Normal react query behaviour)
• User navigates forward to the feed using the browser's Forward button → restore the previous cached query state (Normal react query behaviour)
• Everytime user navigates to the feed using <Link> or navigate() → reset the infinite query and fetch fresh data (require knowledge of navigation action type)

The only way you can access the action type state is by subscribing the router.history. Which is not very feasible to implement route scoped logic right now.

 router.history.subscribe((state) => {
     console.log("history subscriber: ", state)
 })

// Dev tool console log

{    
   "action": {
        "type": "PUSH" // THIS VALUE NEED TO BE EXPOSED
    }
    "location": {
        "href": "/",
        "pathname": "/",
        "hash": "",
        "search": "",
        "state": {
            "__hashScrollIntoViewOptions": true,
            "key": "hca89",
            "__TSR_key": "hca89",
            "__TSR_index": 2
        }
    },
}

Current workaround I've

// _main/feed.tsx

const visitedHistoryKeys = new Set<string>()

function isNewHistoryEntry(location: ParsedLocation): boolean {
  if (isServer()) return false
  const key = location.state.__TSR_key ?? location.pathname

  if (visitedHistoryKeys.has(key)) retun false

  visitedHistoryKeys.add(key)
  return true
}

export const Route = createFileRoute('/_main/')({
  ssr: 'data-only',
  loader: async ({ context, deps, location }) => {

    if (isNewHistoryEntry(location)) {
      context.queryClient.resetQueries({
        queryKey: postQueries.feed(deps).queryKey,
      })
    }

    context.queryClient.infiniteQuery(postQueries.feed(deps))
  },
})