Navigation interception (for modal routes, `useBlocker()`, ...)

[brillout]

Description

The best would be a low-level API for enabling all kinds of features around link interception, such as:

• Next.js > Intercepting Routes
• React Router > useBlocker

Vike already implements a rough PoC for this, but it isn't released yet. It needs some more love to make it an official feature.

If you want this, write a comment below elaborating your use case. The more I know about possible use cases the better I can design the API.

See also:

• https://github.com/vikejs/vike/discussions/2257
• Idea: +onNavigation with getPageContextClient()

[afkcodes]

Modal routes would be great @brillout something like masked routes in tanstack router/start. Its a great use case when you have to show something on a modal keeping the existing content still or mounted behind the modal

for eg my use case is to show a Player modal when i click on a mini player the modal actually gets mounted on a rout, this makes mobile view so intuitive as when you do a back it naturally closes the modal.

live Example: https://sunoh.online (this uses tanstack start)

here is the doc for the masking route from tanstack router: https://tanstack.com/router/v1/docs/framework/react/guide/route-masking

[brillout]

I feel like there is potential for a low-level API that enables all this and more.

In principle, if the user can modify:

1. The behavior upon navigation (link click or back/forward navigation)
2. The shown URL

Then all these use cases around "navigation interception" can be implemented. (While vike-{react,vue,solid} can provide high-level helpers for common use cases, like other frameworks.)

@afkcodes Looking at your demo, it seems to be normal modal routing a la Next.js? It doens't seem to use TanStack's route masking feature?

The more use cases I know about, the better.

[afkcodes]

Its actually built using tanstack-start @brillout , yeah its kind of similar to modal route, but its using masking route from tanstack start/router