描述：我正在使用 React Router v6 在 React 中构建房间预订系统。当用户点击预订链接 (/book/:roomId) 时，如果未通过身份验证，则应将其重定向到登录页面。成功登录后，应将他们带回预订页面，而不是主页/仪表板。
现在，我的问题是：
用户点击预订链接后会正确重定向到登录页面。登录后，他们不会被重定向回预订页面，而是进入个人资料或仪表板。如何在登录前正确存储预期的预订页面并在身份验证后将用户导航回该页面？
我在 Rooms.tsx 文件中尝试过的方法，我像这样处理直接预订尝试：
import React, { useEffect } from
'react';
import { useNavigate, useLocation } from 'react-router-dom';
import { useAuth } from '../contexts/AuthContext';
const Rooms: React.FC = () => {
const navigate = useNavigate();
const location = useLocation();
const { isAuthenticated } = useAuth();
useEffect(() => {
const match = location.pathname.match(/^\/book\/([a-f0-9]{24})$/i);
if (match) {
const roomId = match[1];
if (!isAuthenticated) {
sessionStorage.setItem('redirectAfterLogin', `/book/${roomId}`);
navigate('/signin', { state: { from: `/book/${roomId}` }, replace: true });
} else {
navigate(`/book/${roomId}`);
}
}
}, [location, navigate, isAuthenticated]);
return <div>Room List Here</div>;
};
export default Rooms;
在我的 SignIn.tsx 文件中，我尝试检查登录后存储的重定向路径：
import React, { useEffect } from
'react';
import { useNavigate } from 'react-router-dom';
import { useAuth } from '../contexts/AuthContext';
const SignIn = () => {
const navigate = useNavigate();
const { isAuthenticated } = useAuth();
useEffect(() => {
if (isAuthenticated) {
const redirectPath = sessionStorage.getItem('redirectAfterLogin');
if (redirectPath) {
sessionStorage.removeItem('redirectAfterLogin');
navigate(redirectPath, { replace: true });
}
}
}, [isAuthenticated, navigate]);
return <div>Sign In Form Here</div>;
};
export default SignIn;
当前问题 即使 redirectAfterLogin 存储在 sessionStorage 中，登录后，用户仍会被带到默认页面，而不是预期的 /book/:roomId 页面。
问题： 如何正确存储预期的 URL 并确保用户登录后导航回 /book/:roomId？
