Intenté crear una ruta protegida y creé un componente como este
import {useSelector} from "react-redux"; import {userSelect} from "../../Redux/userSlice"; import {Navigate} from "react-router-dom"; const ProtectedRoute = ({children}) => { const currentUser = useSelector(userSelect); if (currentUser.user) { return children; } return <Navigate to="/login"/>; } export default ProtectedRoute;pero el problema es que Navigate no importa desde react-router-dom, simplemente verifique los documentos de router-dom y recomiendan y usan Navigate para la ruta protegida, pero no funciona correctamente, el problema principal es que Navigate no importa desde router-dom para mí. , mi versión de route-dom es 6.3.0. ¿Alguien sabe por qué sucedió esto y cómo resolver este problema de importación? Intento reinstalar mis archivos node_modules pero aún no funciona.
Intente usar useNavigate en su lugar
import {useSelector} from "react-redux"; import {userSelect} from "../../Redux/userSlice"; import { useNavigate } from "react-router-dom"; const ProtectedRoute = ({children}) => { const navigate = useNavigate() const currentUser = useSelector(userSelect); if (currentUser.user) { return children; } navigate('/login'); } export default ProtectedRoute;Parece que en realidad no tiene instalado react-router-dom@6 para su proyecto.
Puede verificar la versión instalada ejecutando npm list react-router-dom` desde el directorio del proyecto.
Si la entrada del archivo package.json para react-router-dom es correcta, es posible que haya olvidado ejecutar npm install para instalar las dependencias.
Ejecute npm i para instalar las dependencias del proyecto.
Si el package.json especifica una versión diferente de react-router-dom , deberá desinstalar esa versión e instalar v6.
Desinstale la versión actual y también cualquier versión de react-router e history ( para eliminar cualquier problema de compatibilidad ya que v6 usa history@5 )
npm uninstall -s react-router react-router-dom history
Instalar react-router-dom v6
npm install -s react-router-dom@6