title: React - Cannot read properties of undefined (reading 'pathname')
body: <p>I don't understand why the error appears. My task is to make animation between Routes. Can you suggest where I made a mistake?
  <a href="https://i.stack.imgur.com/5Qmoz.png" rel="nofollow noreferrer">enter image description here</a>
  I use react-spring package, i reinstalled it but nothing helped</p>
  <pre><code> import React from 'react';
      import { Routes, Route, useLocation } from 'react-router-dom';
      import { useTransition, animated } from 'react-spring'
      
      import Home from './Home/Home';
      import Signup from './Form/Signup';
      import Login from './Form/Login';
      import Reset from './Form/Reset';
      import Shop from './Shop/Shop';
      import Dash from './../pages/Dashboard/Dashboard';
      
      const Main = () =&gt; {
      
        const location = useLocation();
        const transitions = useTransition(location, location =&gt; location.pathname, {
          from: { opacity: 0, transform: 'translate3d(100vw, 0, 0)' },
          enter: { opacity: 1, transform: 'translate3d(0, 0, 0)' },
          leave: { opacity: 0, transform: 'translate3d(-20vw, 0, 0)' },
        });
      
        return transitions.map(({ item: location, props, key }) =&gt;  (
          &lt;&gt;
          &lt;animated.div key={key} style={props}&gt;
          &lt;Routes location={location}&gt;
            &lt;Route path='/' element={&lt;Home/&gt;} /&gt;
            &lt;Route exact path='/signup' element={&lt;Signup/&gt;}/&gt;
            &lt;Route exact path='/login' element={&lt;Login/&gt;}/&gt;
            &lt;Route exact path='/dashboard' element={&lt;Dash/&gt;}/&gt;
            &lt;Route exact path='/reset-password' element={&lt;Reset/&gt;}/&gt;
            &lt;Route exact path='/shop' element={&lt;Shop/&gt;}/&gt;
          &lt;/Routes&gt;
          &lt;/animated.div&gt;
          &lt;/&gt;
      
        ));
      };
      
      export default Main;
  </code></pre>