Motion: [BUG] Redirect in React-router

[KondakovArtem]

1. Read the FAQs 👇

2. Describe the bug
I have problem with using Redirect in React router.
I use standart example with react-router and add Redirect component.

When i open url "/test", it correctly redirected to "/" but animation not started, and nothing happened

https://codesandbox.io/s/framer-motion-x-react-router-mu294

Steps to reproduce the behavior:

1. Go to '/test'
2. Page redirected to "/"
3. Nothing happens

5. Expected behavior
Start animation of main page

[m4tta]

I've run into this same issue today.

[evstinik]

+1 here

[lightyen]

I found a trick:

const MotionRedirect: React.FC<RedirectProps> = ({ children, ...props }) => (
    <motion.div exit="undefined">
        <Redirect {...props} />
    </motion.div>
)

demo: https://codesandbox.io/s/react-router-framer-motion-dr4u6

---

v2 demo: https://codesandbox.io/s/framer-motion-v2-react-router-kisy4

[deebov]

same problem

[alecbignell]

I'm having this same issue in a case where a component will conditionally render a redirect. In a case where you directly navigate to the page by URL, the default usecase will cause the condition to return the redirect, and it has the same issue, once redirected the component doesn't show.

Using the workaround above solved this.

[EugeneBugor]

It is also an urgent problem for my case. Would be good if you guys can investigate the issue 🙏 @InventingWithMonster

[enzozerega]

Thanks @lightyen !! Your answer was really helpful. I also was having issues with the <Redirect /> and <AnimatePresence /> components. And wrapping the <Redirect /> component into a <motion /> component with exit="undefined" did the trick. In my code, where I had defined my app routes, what I did was:

import { Fragment } from "react";

<AnimatePresence initial={false} exitBeforeEnter>
    <Switch location={location} key={location.key}>
        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
        <Route path="/contact" component={Contact} />
        <Route path="/not-found" component={NotFound} />
        <motion.Fragment exit="undefined">
            <Redirect to="/not-found" />
        </motion.Fragment>
    </Switch>
</AnimatePresence>