[BUG] Extra render of mounted component before unmount on route change when using AnimatePresence with react router v6

[vaibhavm02]

1. Read the FAQs 👇
Done.
2. Describe the bug

When using AnimatePresence, when location changes to a new location, there is a render happening before unmount where the current mounted component is getting the new location.

For example, in our case, we're dependent on an id parameter on our product page from query params(say /product?id=product1) to fetch updated data if it changes. Now, suppose you go to a different page which is also using a similar id param(say: category?id=category1) from current product page then before unmount the effect on product page will trigger with this new id and will result in an error(as there is no product with id as category1).

When we're not using AnimatePresence then on route change the current component is not getting the new location.

3. IMPORTANT: Provide a CodeSandbox reproduction of the bug

A CodeSandbox minimal reproduction will allow us to quickly follow the reproduction steps. Without one, this bug report won't be accepted.

Codesandbox reproduction forked from the example given on framer website:

https://codesandbox.io/s/render-issue-framer-motion-screen-wipe-page-transitions-with-react-router-6-forked-mydl7d

4. Steps to reproduce

Steps to reproduce the behavior:

1. From the home route(/), go to /amsterdam or /london route
2. In the console please note the logging that the old component is getting the new location. This is happening on every route change
3. To view the behaviour with query params as mentioned above, click on any of the last two links on the home page then come back to home page on clicking "Back to galleries but with id param" at the bottom.
4. You'll see the log will as component: Gallery, idParam: home

5. Expected behavior

On changing route, current mounted component should not get new location which is happening when not using AnimatePresence.

I've also linked other sandboxes with different combinations.

Observations:

1. Sandboxes 1-3 are giving the same output as described above.
2. The 4th sandbox is different in the way that after passing location argument to useRoutes, the extra render is there but the location passed to the old component is the old one and not the new location unlike other cases. However, when we pass location argument the value of useNavigationType for children container is always "POP" regardless of the action performed.
3. When not using AnimatePresence(5th sandbox), extra render is not there on route change.

Iterations:

1. Above sandbox is forked from the framer example sandbox with react-router-dom v6.
   react: 18.0.0
react-dom: 18.0.0
react-router-dom: 6.3.0
framer-motion: 7.2.0

2. Sandbox with the versions that we're using in our app
   react: 18.2.0
react-dom: 18.2.0
react-router-dom: 6.7.0
framer-motion: 7.6.2

3. Sandox with the latest versions of react, react-router, and framer-motion
   react: 18.2.0
react-dom: 18.2.0
react-router-dom: 6.8.1
framer-motion: 9.0.2

4. Sandbox with the latest versions as above and passing location in useRoutes

5. No extra render when not using AnimatePresence

[mattgperry]

To set expectations this is being closed as wontfix as I probably won't have time to look into integrations with any specific framework.