Shorthand method for navigation with view transition

[aramir]

Currently creating programmatic navigation with view transition requires the following code:

navigate("/about", { viewTransition: true });

If a transition is used in the application it is likely that all navigation calls will use it -- and as far as I can see there is no way to set it globally.

Considering this, it would be nice to have a simple "shorthand" method which would perform a navigation with viewTransition: true, avoiding adding that to each and every navigate() call.

Something like this:

transition("/about");

[sergiodxa]

A new API will make this more complex, not simpler. I think there should be a single place where this can be configured so you can then use navigate("/about") and that will have the flag as true automatically, same with <Link viewTransition>, <Form viewTransition>, etc.

You don't want to add an alternative to Link, Form, etc. that has viewTransition by default, so this needs to be a centralized configuration.

[aramir]

Agreed, centralized configuration would be ideal.

Above was suggested as a faster/easier to implement alternative.

[sergiodxa]

You can also do that yourself btw:

function useNavigateTransition() {
  let navigate = useNavigate()
  return useCallback(path => navigate(path, { viewTransition: true }), [navigate])
}

Something like that (but adding better types probably), then use your own hook, same thing with Link and Form you could wrap them in a custom component.

But I think a better solution would be to have some option maybe in rear-router.config.ts to enable it by default.