Support a callback function for unstable_viewTransition props

[brophdawg11]

Quick first pass at supporting <Link to="/path" unstable_viewTransition={fn}> where fn is (path: Path) => boolean) - allowing applications to lazily compute the boolean value at click time. The primary use case is large applications where routes are managed in a central manifest - and they need to look up a route in the manifest to know if view transitions should be enabled. This can get prohibitively expensive to do path-matching and looking up routes at render time for all rendered links.

I also want to look at supplying matches to the callback but that's a bit more involved from an implementation standpoint since we need to move the callback execution down into the guts of the router after Fog of War matching has completed.

^ I looked into this and it's totally doable, but it feels a bit odd to do this "use location/matches to determine whether to apply a view transition" at the call-site - that feels far more like a global API. If you want this "generic" approach you would probably just end up using your own Link wrapper to put this callback on every Link in the app. I'm now leaning towards leaving the Link prop as a boolean (targeted call-site version) and adding a new top-level function you can use globally if you prefer to operate off a manifest:

// I know which paths I want to enable for
<Link to="/path" unstable_viewTransition>

// This feels weird - I give you a specific path but then write a very generic function 
// to determine if the destination route wants view transitions
<Link to="/path" unstable_viewTransition={({ location, matches })} => {
  return enableViewTransition(location, matches);
}}>

// This feels like a more appropriate spot for that API
let router = createBrowserRouter(routes, {
  unstable_viewTransition({ location, matches }) {
    return enableViewTransition(location, matches);
  }
});

// Or, even better - why not just give one generic spot to lazily provide navigation opts:
let router = createBrowserRouter(routes, {
  onNavigation({ location, matches, navigateOpts }) {
    return {
      // Use whatever opts were specified at the call site
      ...navigateOpts,
      // But globally determine view transition behavior
      unstable_viewTransition: enableViewTransition(location, matches),
    };
  }
});

[changeset-bot]

🦋 Changeset detected

Latest commit: 76707b0

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 4 packages

Name	Type
react-router-dom	Minor
react-router	Minor
react-router-dom-v5-compat	Minor
react-router-native	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR