Can we intercept navigations on a global or per-route basis to add viewTransitions/state?

[tarungunampalli1]

I'm currently using client side routing with a Data Router. I want to start making use of viewTransitions, but adding a viewTransition prop to every navigate, Navigate, Link, and NavLink is very annoying and not super feasible. Similarly, I would like some global state on our navigations (like a from state that specifies the previous path)

My first instinct is to make wrapper functions/components of each that provide the default behavior that I want, but that's annoying to maintain and I would prefer the direct API.

My second thought was using middleware to intercept navigations and apply the state and props, but it doesn't seem like we are allowed to change the navigation from middleware.

Are there any more recommended ways to implement this?

[wesleysmyth]

Yes — React Router v7 (which Remix is now built on) supports this. Here are the approaches from simplest to most flexible:

1. Global viewTransition via Link wrapper

Create a custom <AppLink> that passes viewTransition by default:

// app/components/AppLink.tsx
import { Link, type LinkProps } from 'react-router';

export function AppLink(props: LinkProps) {
  return <Link viewTransition {...props} />;
}

Use <AppLink> everywhere instead of <Link>. Every navigation gets a view transition automatically.

2. Programmatic navigation wrapper

// app/hooks/useAppNavigate.ts
import { useNavigate, useLocation, type NavigateOptions } from 'react-router';

export function useAppNavigate() {
  const navigate = useNavigate();
  const location = useLocation();

  return (to: string, options?: NavigateOptions) => {
    navigate(to, {
      viewTransition: true,
      state: { from: location.pathname, ...options?.state },
      ...options,
    });
  };
}

This injects both viewTransition: true and state.from into every programmatic navigation.

3. Per-route view transition CSS

Once viewTransition is enabled, customize animations per route using CSS:

::view-transition-old(root) {
  animation: fade-out 0.2s ease-in;
}
::view-transition-new(root) {
  animation: fade-in 0.2s ease-out;
}

/* Slide transition for specific elements */
.slide-target {
  view-transition-name: slide-panel;
}
::view-transition-old(slide-panel) {
  animation: slide-out-left 0.3s ease-in;
}
::view-transition-new(slide-panel) {
  animation: slide-in-right 0.3s ease-out;
}

4. Conditional transitions based on direction

Use useViewTransitionState to apply different animations:

import { useViewTransitionState } from 'react-router';

function NavLink({ to, children }: { to: string; children: React.ReactNode }) {
  const isTransitioning = useViewTransitionState(to);
  return (
    <Link to={to} viewTransition>
      <span className={isTransitioning ? 'transitioning' : ''}>
        {children}
      </span>
    </Link>
  );
}

5. Router-level interception via root route

For truly global behavior, use the root route to track navigation state:

// app/root.tsx
import { useNavigation, useLocation } from 'react-router';

export default function Root() {
  const navigation = useNavigation();
  const location = useLocation();

  useEffect(() => {
    if (navigation.state === 'loading') {
      document.documentElement.dataset.transitioning = 'true';
      document.documentElement.dataset.from = location.pathname;
    } else {
      delete document.documentElement.dataset.transitioning;
      delete document.documentElement.dataset.from;
    }
  }, [navigation.state, location]);

  return <Outlet />;
}

Then style based on [data-transitioning] and [data-from] attributes in CSS.

The <AppLink> wrapper (#1) is the pragmatic choice for most apps — it gives you global view transitions with minimal complexity.