Recibo el siguiente error cuando npm run start en la terminal.
Intento de error de importación: 'Redirect' no se exporta desde 'react-router-dom'.
Reinstalé node_modules , react-router-dom , react-router . También reinicié la terminal y mi computadora, pero el problema persiste.
Mi código:
import React from 'react'; import { Switch, Redirect } from 'react-router-dom'; import { RouteWithLayout } from './components'; import { Minimal as MinimalLayout } from './layouts'; import { Login as LoginView, Dashboard as DashboardView, NotFound as NotFoundView } from './views'; const Routes = () => { return ( <Switch> <Redirect exact from="/" to="/dashboard" /> <RouteWithLayout component={routeProps => <LoginView {...routeProps} data={data} />} exact layout={MinimalLayout} path="/login" /> <Redirect to="/not-found" /> </Switch> ); }; export default Routes; Aquí están mis importaciones package.json :
"react-router": "^6.0.0-beta.0", "react-router-dom": "^6.0.0-beta.0",Para react-router-dom v6, simplemente reemplace Redirect con Navigate
import { Navigate } from 'react-router-dom'; . . . { component: () => <Navigate to="/404" /> }La redirección se eliminó de v6 . Puede reemplazar Redirigir con Navigate .
import { BrowserRouter as Router, Routes, Route, Navigate, } from 'react-router-dom'; import Home from '../home/Home'; export default function App() { return ( <Router> <Routes> <Route path="/home" element={<Home />} /> <Route path="/" element={<Navigate replace to="/home" />} /> </Routes> </Router> ); }El componente de Redirect se eliminó de la versión 6 de react-router .
De los documentos del enrutador de reacción:
El elemento
<Redirect>de v5 ya no se admite como parte de la configuración de su ruta (dentro de un ). Esto se debe a los próximos cambios en React que hacen que no sea seguro alterar el estado del enrutador durante el renderizado inicial. Si necesita redirigir inmediatamente, puede a) hacerlo en su servidor (probablemente la mejor solución) o b) representar un elemento<Navigate>en su componente de ruta. Sin embargo, reconozca que la navegación ocurrirá en unuseEffect.
Si desea utilizar el componente de Redirect , deberá utilizar la versión 5 del enrutador de reacción.
Alternativamente, puede usar el componente Navigate de react router v6. Un elemento <Navigate> cambia la ubicación actual cuando se representa
import { Navigate } from "react-router-dom"; return ( <Navigate to="/dashboard" replace={true} /> ) Nota: Navigate es un contenedor de componentes alrededor del gancho useNavate . Puede usar este enlace para cambiar las rutas mediante programación.