React - 无法读取未定义的属性（读取“路径名”）

Question

我不明白为什么会出现错误。 我的任务是在路线之间制作动画。 你能建议我在哪里犯了错误吗？ 在此处输入图像描述我使用 react-spring 包，我重新安装了它但没有任何帮助

 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

我实际上认为这是因为您可能正在使用 v9 或react-spring但您编写的语法是 v8。

这能解决您的问题吗？

    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;