Quiero que mi página de inicio de sesión vaya a la página de confirmación de contacto si obtengo el número 200 del servidor, pero no funciona. ¿Dónde está mi error?
const [form, setForm] = useState({}); async function checkLogin() { try { const response = await axios({ url: 'https://api.bms-go2tr.com/api/v1/check', method: 'POST', data: form }); if (response.status == 200) { return <Link to="/Verification"/> } } catch (error) { if (error.status == 493) { return <Link to="/Verification" /> } else { alert(error.response.data.message) } }No puede devolver JSX así en una devolución de llamada y esperar que se represente en el DOM. En los controladores de devolución de llamada como este, desea emitir una acción de navegación imperativa ( es decir, usar la función de navigate ), frente a una acción declarativa ( es decir, representar un componente de Link Navigate navegación).
Use el useNavigate para acceder a la función de navigate y reemplace el Link con una llamada para navigate .
Ejemplo:
import { useNavigate } from 'react-router-dom'; ... const navigate = useNavigate(); const [form, setForm] = useState({}); async function checkLogin() { try { const response = await axios({ url: 'https://api.bms-go2tr.com/api/v1/check', method: 'POST', data: form }); if (response.status == 200) { navigate("/Verification"); } } catch (error) { if (error.status == 493) { navigate("/Verification"); } else { alert(error.response.data.message); } } }El componente <Link> se usa para crear un enlace en su aplicación, pero no navega a ese enlace. Para Navegación, puede usar el gancho useNavigate() o el Componente <Navigate> (si usa el enrutador de reacción v6).
Solución: en lugar de <Link to="/Verification" /> use <Navigate to="/Verification" /> .