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?
Cree el archivo RequireAuth.tsx
import { useLocation, Navigate } from "react-router-dom"; import { useAuth } from "../hooks/Auth"; export function RequireAuth({ children }: { children: JSX.Element }) { let { user } = useAuth(); let location = useLocation(); if (!user) { return <Navigate to="/" state={{ from: location }} replace />; } else { return children; } }Importe el componente para que el usuario necesite un enrutador privado:
import { Routes as Switch, Route } from "react-router-dom"; import { RequireAuth } from "./RequireAuth"; import { SignIn } from "../pages/SignIn"; import { Dashboard } from "../pages/Dashboard"; export function Routes() { return ( <Switch> <Route path="/" element={<SignIn />} /> <Route path="/dashboard" element={ <RequireAuth> <Dashboard /> </RequireAuth> } /> </Switch> ); }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="/" replace />} /> </Routes> </BrowserRouter> Para mantener limpio el historial, debe configurar replace prop. Esto evitará redireccionamientos adicionales después de que el usuario vuelva a hacer clic. Gracias @Paul por este consejo.
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