Estoy revisando los tutoriales de React-Redux Toolkit y he configurado la autenticación (parcialmente). Me gustaría agregar una redirección en la autenticación.

Estoy usando "react-router-dom": "^6.2.1",

En mi LoginForm.js , estoy tratando de redirigir usando Redirect by react-router-dom :

 import React, { useState } from "react"; import { Link, Redirect } from "react-router-dom"; import { useDispatch, useSelector } from "react-redux"; import { loginUser } from "../../features/auth/authSlice"; export default function LoginForm() { const dispatch = useDispatch(); const auth = useSelector((state) => state.auth); const [userInput, setUserInput] = useState({ username: "", password: "", }); const onChangeHandler = (e) => { setUserInput((prevState) => { return { ...prevState, [e.target.id]: e.target.value }; }); }; const onSubmitHandler = (e) => { e.preventDefault(); dispatch(loginUser(userInput)); }; if (auth.isAuthenticated) { return <Redirect to="/" />; // this line of code causes the error }

Consola:

Error no capturado (en promesa): el tipo de elemento no es válido: esperaba una cadena (para componentes integrados) o una clase/función (para componentes compuestos) pero obtuvo: indefinido. Probablemente olvidó exportar su componente desde el archivo en el que está definido, o puede haber mezclado las importaciones predeterminadas y con nombre.

Cuando cambio el código a esto, se registra true :

 if (auth.isAuthenticated) { console.log(auth.isAuthenticated) }

No entiendo lo que dice el error. ¿Alguien podría explicarme para poder solucionarlo?

EDITAR : cuando intento usar la Redirect sin otro código en el formulario, también da el mismo error.