title: Framer Motion and React router 5: How do I prevent re-render of parent components with nested routes?
body: <p>In the example sandbox below I have a parent React Router rendering two animated components.</p>
  
  <p><a href="https://codesandbox.io/s/frame-motion-x-react-router-x-simple-tb1wg?file=/src/Routes.tsx" rel="nofollow noreferrer">https://codesandbox.io/s/frame-motion-x-react-router-x-simple-tb1wg?file=/src/Routes.tsx</a></p>
  
  <p>One of them contains its own nested links - each with their own independent framer-motion animations. I need to stop the parent of the nested switch re-rendering when i click a route link. I can see the problem is related to use of the switch key on both levels but i dont know what to replace it with to stop re-rendering higher up the component hierarchy. If I remove the key, it breaks the animation.</p>
  
  <p>Steps:</p>
  
  <p>select About. note correct entry and exit animations.
  select Contact. note the correct entry and exit animations.
  select Child 1. note the unwanted re-render of the parent component
  select Child 2. note the unwanted re-render of the parent component
  Notes:</p>
  
  <ul>
  <li>i've added some Math.random() calls inline which change on re-render</li>
  <li>i've included a top level link with no animation to demonstrate the
  nested components animate on mounting as expected. however it is
  still re-rendering on selection of child links.</li>
  </ul>
  
  <p>The location.pathname key is forcing re-renders when selecting deep nested links. what can i sensibly replace it with so that it doesn't re-render? Ive tried removing it, but that breaks the animation.</p>
  
  <p>
  thanks</p>