Descrição : Estou construindo um sistema de reserva de salas no React com React Router v6. Quando um usuário clica em um link de reserva (/book/:roomId), se ele não estiver autenticado, ele deve ser redirecionado para a página de login. Após o login bem-sucedido, ele deve ser levado de volta para a página de reserva em vez da home/dashboard.
No momento, meu problema é:
O usuário é redirecionado para a página de login corretamente ao clicar em um link de reserva. Após fazer login, ele não é redirecionado de volta para a página de reserva, mas sim para o perfil ou painel. Como posso armazenar corretamente a página de reserva pretendida antes do login e navegar o usuário de volta para ela após a autenticação?
O que eu tentei No meu arquivo Rooms.tsx, eu lido com tentativas de reserva direta assim:
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;
No meu arquivo SignIn.tsx, tento verificar se há um caminho de redirecionamento armazenado após o login:
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;
Problema atual Embora redirectAfterLogin esteja armazenado em sessionStorage, após o login, o usuário ainda é levado para a página padrão em vez da página /book/:roomId pretendida.
Pergunta: Como posso armazenar corretamente o URL pretendido e garantir que o usuário seja redirecionado de volta para /book/:roomId após efetuar login?
