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> ); }

En realidad, cambiar y redirigir son los enrutadores definidos jn react-router versión 5 y actualmente react-router versión 6, por lo que esto tampoco será una palabra. Usó la versión 5 con cambiar y redirigir o enrutadores y con la versión 6

Hola, recordé que había un gancho llamado useHistory, este gancho todavía existe, solo tiene algunos cambios y se le cambió el nombre a useNavigate. Usando esto y siguiendo uno de los ejemplos de la documentación, hice este retrabajo para mis rutas protegidas:

 import { useEffect, useState } from "react"; import { useNavigate } from "react-router-dom"; import { useAuth } from "../../contexts/AuthContext"; function ProtectedRoutes({ component: Component }, props) { const [loading, setLoading] = useState(true); const { currentUser } = useAuth(); const navigate = useNavigate(); useEffect(() => { if (currentUser) { setLoading(false); return; } navigate("/"); }, []); return <>{loading ? "Loading..." : <Component {...props} />} </>; } export default ProtectedRoutes;

Y en mis Rutas esto se usa así:

 import { BrowserRouter as Router, Route, Routes } from "react-router-dom"; import AuthFirebaseHelper from "./helpers/AuthFirebaseHelper/AuthFirebaseHelper"; import ProtectedRoutes from "./helpers/ProtectedRoutes/ProtectedRoutes"; import Dashboard from "./components/Dashboard"; import Home from "./components/Home"; function App() { return ( <Router> <Routes> <Route path="/authentication" element={<AuthFirebaseHelper />}></Route> <Route path="/" exact element={<Home />}></Route> <Route path="/restricted" element={<ProtectedRoutes component={Dashboard} />} ></Route> </Routes> </Router> ); }

exportar la aplicación predeterminada;

La documentación para useNavigation

El componente de redirección se eliminó de la versión 6 de react-router. Para react-router-dom v6, simplemente reemplace Redirect con Navigate

 import { Navigate } from 'react-router-dom'; <Routes> <Route path="/login" element={isLogin ? <Navigate to="/" /> : <Login />}/> </Routes>

Para react-router-dom v6, simplemente reemplace Redirect con Navigate

 import { Navigate } from 'react-router-dom'; . . . { component: () => <Navigate to="/404" /> }

Como se eliminó en v6 , puede usar esto como una alternativa.

 <Route path="*" element={<NotFound />} />

La redirección se eliminó de v6 , pero puede hacerlo así ahora mismo:

 <Route path="*" element={<Navigate to ="/" />}/>

import { Routes, Route , Navigate } from "react-router-dom"; return ( <Routes> <Route path='/products/:id' element={<Store/>} /> //replace Redirect with Navigate <Route path="*" element={<Navigate to ="/products" />}/> </Routes> );

Para las versiones 6.X, debe usar el useNavigate .

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 un useEffect .

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.

No puede usar el componente Redirect porque se eliminó de la versión 6 de react-router-dom .

Puede usar react-router-dom versión 4.2.2. Simplemente use el siguiente código para instalarlo.

 npm install --save react-router-dom@4.2.2

o

 yarn add react-router-dom@4.2.2

Que tenga un buen día.