Styles removed during navigation

[ramiroazar]

Reproduction

1. Open reproduction https://stackblitz.com/~/github.com/ramiroazar/react-router-5sqlyrtv
2. Click the NavLink component
3. Notice route transition breaks because styles are removed from the current route (ie. links lose their colour before the current route fades out)

Note: This issue and reproduction have been migrated from remix-run/remix#10160 as instructed

System Info

System:
    OS: Linux 5.0 undefined
    CPU: (4) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 0 Bytes / 0 Bytes
    Shell: 1.0 - /bin/jsh
  Binaries:
    Node: 20.19.1 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 10.8.2 - /usr/local/bin/npm
    pnpm: 8.15.6 - /usr/local/bin/pnpm
  npmPackages:
    @react-router/dev: ^7.9.2 => 7.9.3 
    @react-router/node: ^7.9.2 => 7.9.3 
    @react-router/serve: ^7.9.2 => 7.9.3 
    react-router: ^7.9.2 => 7.9.3 
    vite: ^7.1.7 => 7.1.7

Used Package Manager

npm

Expected Behavior

It should be possible to achieve route transitions in production when using react-router build, like it works in development when using react-router dev.

Actual Behavior

This works as expected in development when using react-router dev, but not in production when using react-router build.

In production, React Router unloads the CSS for the current route as soon as the next route is navigated to, leaving the current route unstyled during the exit transition, even though the route component isn't unmounted.

The reproduction follows the AnimatedOutlet pattern described below.

#8008 (comment)

Styles are implemented using CSS modules, but this has affected any CSS solution requiring CSS bundling since Remix, like Vanilla Extract.

remix-run/remix#10160

It's not clear from the various discussions and articles over time how to overcome this in order to properly achieve route transitions.

[feledori]

I think this expected behaviour. As a navigation happens the internal state of the router removes all files associated with that route. TransitionGroup just holds elements in state and unmounts them later. If you transition after a fixed timeframe you could just call the navigation after the animation. Something we came up with is using a hook called useFOUCFix which is mounted globally and tracks the state of the head and keeps all mounted css link in the head manually. Tracking files by using a Set.

Here is the code:

const cssFilesSet = new Set<string>();

function useTransitionFOUCFix() {
  useEffect(() => {
    const observer = new MutationObserver((mutations) => {
      for (const mutation of mutations) {
        for (const node of mutation.removedNodes) {
          if (node instanceof HTMLLinkElement && node.rel === "stylesheet") {
            const link = document.createElement("link");
            link.rel = "stylesheet";
            link.href = node.href;
            cssFilesSet.add(node.href);
            document.head.appendChild(link);
          }
        }
      }
    });

    observer.observe(document.head, {
      childList: true,
      subtree: true,
    });

    // Initial stylesheet collection
    for (const cssFile of document.querySelectorAll<HTMLLinkElement>(
      'link[rel="stylesheet"]'
    )) {
      cssFilesSet.add(cssFile.href);
    }

    return () => {
      observer.disconnect();
      cssFilesSet.clear();
    };
  }, []);
}