title: Transition between routes in react-router-dom v6.3
body: <p>So I´m currently refactoring a website, and so I do with the rrd, which was on v5 in the previous website version.
  Now, that the  component doesn´t exist anymore we have to work with the new  component as you probably know.</p>
  <p>I previously used framer-motion to transition in and out between the routes like so:</p>
  <pre><code>&lt;Switch location={location} key={location.pathname}&gt;
    &lt;motion.div
      initial=&quot;initial&quot;
      animate=&quot;in&quot;
      exit=&quot;out&quot;
      variants={pageVariants}
      transition={pageTransition}&gt;
      &lt;Route path=&quot;/audit&quot; component={Audit} /&gt;
      &lt;Route exact path=&quot;/smartx&quot; component={SmartX} /&gt;
      &lt;Route path=&quot;/smartx/erc20&quot; component={TokenGenerator} /&gt;
      &lt;Route path=&quot;/createAudit&quot; component={PaymentStatus} /&gt;
      &lt;Route path=&quot;/faq&quot; component={FAQ} /&gt;
      &lt;Route path=&quot;/support&quot; component={Support} /&gt;
      &lt;Route path=&quot;/terms&quot; component={Terms} /&gt;
      &lt;Route path=&quot;/policy&quot; component={Policy} /&gt;
      &lt;Route path=&quot;/about&quot; component={About} /&gt;
      &lt;Route exact path=&quot;/&quot;&gt;
        &lt;Redirect to=&quot;/audit&quot; /&gt;
      &lt;/Route&gt;
    &lt;/motion.div&gt;
  &lt;/Switch&gt;;
  </code></pre>
  <p>Simply replacing the Switch component with the Routes component won´t work, since you can only have Route components as childs from .
  Moving the &lt;motion.div&gt; one layer up over the Routes component leads to only one initial fade in transition on page load.</p>
  <p>new (not quiet working version):</p>
  <pre><code>&lt;AnimatePresence&gt;
    &lt;PageLayout&gt;
      &lt;motion.div
        initial=&quot;initial&quot;
        animate=&quot;in&quot;
        variants={pageVariants}
        transition={pageTransition}&gt;
        &lt;Routes&gt;
          &lt;Route path=&quot;/audit&quot; element={&lt;Audit /&gt;} /&gt;
          &lt;Route path=&quot;/smartx&quot; element={&lt;SmartX /&gt;} /&gt;
          &lt;Route path=&quot;/faq&quot; element={&lt;FAQ /&gt;} /&gt;
          &lt;Route path=&quot;/support&quot; element={&lt;Support /&gt;} /&gt;
          &lt;Route path=&quot;/terms&quot; element={&lt;Terms /&gt;} /&gt;
          &lt;Route path=&quot;/policy&quot; element={&lt;Policy /&gt;} /&gt;
          &lt;Route path=&quot;/about&quot; element={&lt;About /&gt;} /&gt;
        &lt;/Routes&gt;
      &lt;/motion.div&gt;
    &lt;/PageLayout&gt;
  &lt;/AnimatePresence&gt;; 
  </code></pre>
  <p>Framer motion animations (equalin both old and new version):</p>
  <pre><code>  const pageVariants = {
      initial: {
        opacity: 0
      },
      in: {
        opacity: 1
      },
      out: {
        opacity: 0
      }
    };
  
    const pageTransition = {
      type: 'tween',
      ease: 'linear',
      duration: 0.5
    }; 
  </code></pre>
  <p>Any ideas on how to achieve a transition on each route switch?</p>
  <p>Thanks in advance and cheers!</p>