View Transitions don't work in Library mode

[alexanderson1993]

I'm using React Router as a...

library

Reproduction

Go to https://stackblitz.com/edit/vitejs-vite-fbo2zvjx

Click the "Go to Page 2" link

System Info

StackBlitz

Used Package Manager

npm

Expected Behavior

The elements should fade out and in as it transitions between pages.

The logo also has view-transition-name applied to it so it should translate between pages.

Actual Behavior

The pages cut between each other with no transition.

[tomdrewes]

I just ran into this issue as well - hoping view transitions will be supported in library mode.

[tomdrewes]

For what it's worth, I took a look at the view transitions example here:
https://github.com/remix-run/react-router/tree/main/examples/view-transitions

It is using the createBrowserRouter API rather than the declarative BrowserRouter API. I modified the example to use react-router@7.3.0 (stripped a couple pieces that I didn't want to port) and the view transitions from the example (defined in index.css) work for me.

Here's the working example ported to 7.3.0:
https://stackblitz.com/edit/github-izt876kd?file=src%2Fmain.tsx

In my initial testing I had followed the library tutorial here:
https://reactrouter.com/start/library/installation
I defined some routes that I verified were working and jumped to the view transitions tutorial:
https://reactrouter.com/how-to/view-transitions
Where it shows adding viewTransition to a Link and includes the sentence "Without any additional CSS, this provides a basic cross-fade animation between pages." Which led me to believe it would "just work". I don't believe that is the case for library users without adding the appropriate CSS for the transitions and structuring your components correctly with the appropriate classes/Outlet for the route rendering components.

It might be appropriate to update the documentation a bit to indicate what CSS/element structure library-users may need to add to get a basic transition to appear.

I was able to adapt the createBrowserRouter example for my own needs. However, if I copied that route pattern to a declarative pattern, the transitions stopped working, so there is either something I'm missing about how that should work or there is a bug on the declarative side of things.

[brophdawg11]

yeah this a "data router" only feature. We're working on some docs restructuring to better capture this because we lost some of the manual notes we had in the v6 docs around features that required a data router: https://reactrouter.com/6.30.0/components/link#viewtransition