如果在 Routes 组件中添加位置，则无法在 React Router 中获得正确的位置状态

Question

我正在使用 Framer Motion 和 React Router，所以我在 <Routes> 中添加了 location={location}。当我尝试获取 location.state.from 时，它只显示我重定向到的路径，而不是以前的路径。当我在 <Routes> 中删除 location 时，它可以正常工作。

App.js

<AnimatePresence exitBeforeEnter>
  <Routes key={location.pathname} location={location}>
    <Route element={<PublicWrapper />}>
      <Route path="/login" element={<Login />} />
    </Route>

    <Route element={<PrivateWrapper />}>
      <Route path="/tracker" element={<Tracker />} />
    </Route>
  </Routes>
</AnimatePresence>

Login.js

const location = useLocation();
const from = location.state?.from?.pathname;
console.log(from); // Returns '/login' even if user came from '/tracker'

Answer 1

设法通过在 PrivateWrapper 组件而不是 Login 组件中获取路径来解决它。

PrivateWrapper.js

const location = useLocation();
const { setFrom } = useContext(AuthContext);

useEffect(() => {
  setFrom(location.state.from.pathname);
}, [location.state, setFrom]);

如果在 Routes 组件中添加位置，则无法在 React Router 中获得正确的位置状态

Can't get proper location state in React Router if location is added in Routes component

reactjs

react-router

framer-motion