Estoy intentando actualizar a React Router v6 ( react-router-dom 6.0.1 ).
Aquí está mi código actualizado:
import { BrowserRouter, Navigate, Route, Routes } from 'react-router-dom'; <BrowserRouter> <Routes> <Route path="/" element={<Home />} /> <Route path="/lab" element={<Lab />} /> <Route render={() => <Navigate to="/" />} /> </Routes> </BrowserRouter> La última Route está redirigiendo el resto de caminos a / .
Sin embargo, tengo un error.
TS2322: Escriba '{ renderizar: () => Elemento; }' no se puede asignar al tipo 'IntrinsicAttributes & (PathRouteProps | LayoutRouteProps | IndexRouteProps)'. La propiedad 'render' no existe en el tipo 'IntrinsicAttributes & (PathRouteProps | LayoutRouteProps | IndexRouteProps)'.
Sin embargo, según el documento , tiene render para Route . ¿Cómo usarlo correctamente?
Encontré otra manera de hacer esto:
import { useNavigate } from "react-router-dom"; let navigate = useNavigate(); useEffect(() => { if (LoggedIn){ return navigate("/"); } },[LoggedIn]);https://reactrouter.com/docs/en/v6/getting-started/overview#navigation
Creo que deberías usar el enfoque de ruta sin coincidencias.
Compruebe esto en la documentación.
https://reactrouter.com/docs/en/v6/getting-started/tutorial#adding-a-no-match-route
import { BrowserRouter, Navigate, Route, Routes } from 'react-router-dom'; <BrowserRouter> <Routes> <Route path="/" element={<Home />} /> <Route path="/lab" element={<Lab />} /> <Route path="*" element={<Navigate to="/" />} /> </Routes> </BrowserRouter>