Is data browser router production ready?

[rohitpotato]

Is it possible to do route transitions with the new router? I've been racking my brain over making it work. Earlier, you could pass the location prop as a key to any of the transition libraries (framer or react-transition-group).

But now, since the browser router does not accept any other children except routes, I am not really sure how this can be achieved.

I am using new rr v6 features like actions and loaders, is this production ready to handle industry use cases?

If not, which version should i roll back to make it work.

[jrestall]

Does this example work for you? You would need to adapt for react-router a bit but approach of wrapping the outlet is the same.

https://github.com/remix-run/examples/blob/main/framer-route-animation/app/root.tsx

[rohitpotato]

If i render the RouteProvider, won't that be rendering the route? And because useOutlet needs access to the RouteProvider , my animate presence will need to exist as a descendant of RouteProvider (since it needs access to location and outlet)

This means, there will be 2 components rendering the route. Or does, react-router somehow detects and outlet down the tree and renders that outlet only?

[brophdawg11]

The same approach works: https://codesandbox.io/s/eager-sanne-wnrplz?file=/src/index.js

[rohitpotato]

I made it work like this:

const Layout = ({ children }: { children: ReactNode }) => {
  return (
    <motion.main
      key={useLocation().pathname}
      initial={{ x: '10%', opacity: 0 }}
      animate={{ x: '0', opacity: 1 }}
      exit={{ x: '-40%', opacity: 0 }}
    >
      <ScrollToTop />
      {children}
    </motion.main>
  );
};

And wrapping each of the pages with this Layout which I guess is essentially the same if you do nested routes and use useOutlet.

[rohitpotato]

@brophdawg11 While i have you here, is there a replacement for unstable_parseMultipartFormData in react-router?

[brophdawg11]

No - that's only a Remix thing. You can probably use it directly on any node server against a fetch request though.

Please open new discussions for unrelated questions moving forward so the titles are more accurate and they're more easily discovered by other users 🙌