React - Cannot read properties of undefined (reading 'pathname')

Question

I don't understand why the error appears. My task is to make animation between Routes. Can you suggest where I made a mistake? enter image description here I use react-spring package, i reinstalled it but nothing helped

 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 = () => {
    
      const location = useLocation();
      const transitions = useTransition(location, location => 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 }) =>  (
        <>
        <animated.div key={key} style={props}>
        <Routes location={location}>
          <Route path='/' element={<Home/>} />
          <Route exact path='/signup' element={<Signup/>}/>
          <Route exact path='/login' element={<Login/>}/>
          <Route exact path='/dashboard' element={<Dash/>}/>
          <Route exact path='/reset-password' element={<Reset/>}/>
          <Route exact path='/shop' element={<Shop/>}/>
        </Routes>
        </animated.div>
        </>
    
      ));
    };
    
    export default Main;

Answer 1

I actually think this is because you might be using v9 or react-spring yet the syntax you're writing in is v8.

Does this solve your issue?

    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 = () => {
    
      const location = useLocation();
      const transitions = useTransition(location, {
        key: location => 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((props, location) =>  (
        <>
        <animated.div style={props}>
        <Routes location={location}>
          <Route path='/' element={<Home/>} />
          <Route exact path='/signup' element={<Signup/>}/>
          <Route exact path='/login' element={<Login/>}/>
          <Route exact path='/dashboard' element={<Dash/>}/>
          <Route exact path='/reset-password' element={<Reset/>}/>
          <Route exact path='/shop' element={<Shop/>}/>
        </Routes>
        </animated.div>
        </>
    
      ));
    };
    
    export default Main;