Add support for ViewTransitions types.

[RowanDZ]

Hi,

Nice that view transitions are supported in React-router. But, I'm missing something. For some view transitions, you might want the root view transition, and for some you don't. ViewTransition types would be very helpful here (https://developer.mozilla.org/en-US/docs/Web/API/Document/startViewTransition#types). If React-router would support this via the viewTransition prop for the Link (navigate() etc), then we can add types and act accordingly.

Suggestion:
Link prop viewTransition?: boolean => viewTransition?: boolean | {types: string[]}.

Then we could do this:

<Link viewTransition={{types: ['vt-root']}} to="whatever">Go</Link>

:root {
  view-transition-name: none;
}
:root:active-view-transition-type(vt-root) {
  view-transition-name: root;
}

Now, browser will do the view transition for the root, but only when you want to.

I checked the code a bit, but doing a navigation is a massive piece of code, where viewTransition stuff is nested deep.

If I make this own Link component for now, viewTransition does work, but I wonder if there are any downsides of doing this?

import { forwardRef, type MouseEventHandler, type ReactNode } from "react";
import { useNavigate, type NavigateOptions, type To } from "react-router";

type TMyLinkProps = Omit<NavigateOptions, 'viewTransition'> & {
    className?: string
    children?: ReactNode
    to: To
    viewTransition?: boolean | { types: string[] }
}

export const MyLink = forwardRef<HTMLAnchorElement, TMyLinkProps>(
    ({ className, children, to, viewTransition, ...rest }, ref) => {
        const nav = useNavigate()

        const clickHandler: MouseEventHandler = (event) => {
            event.preventDefault()
            if (viewTransition) {
                document.startViewTransition({
                    update: () => {
                        nav(to, { ...rest })
                    },
                    types: viewTransition === true ? undefined : viewTransition.types
                })
            } else {
                nav(to, { ...rest })
            }
        }

        return (
            <a ref={ref} className={className} onClick={clickHandler}>
                {children}
            </a>
        );
    }
);

<MyLink to="/some-route" viewTransition={{ types: ['vt-root'] }}>Link with VT types</MyLink>

[RowanDZ]

As an addition:

Using the workaround, makes the useViewTransitionState not work of course, which is a nice hook to do whatever (add a class) on a list item based on the location where user comes from.
VT types really make a big difference here, else we need to work with classes, and that will make the CSS a mess.