Redirect al login con useLocation en React

Curso de React.js: Navegación con React Router

Contenido del curso

No sé dónde empezar

Fundamentos de navegación en la web

Introducción a React Router DOM 6

Fake authentication con React Router DOM 6

React Router en TODO Machine

Próximos pasos

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:003:42

Redirect al login con useLocation en React

Curso de React.js: Navegación con React Router

Clase 16 de 30

Clase 16 / 30

Comentarios (35)35 comentarios

Alfredo Jose Mendez

Hace 4 años

Cristian steven lopez cadena

Hace 4 años

Cesar Guevara Cabrera

Hace 4 años

Diana Florez

Hace 4 años

Juan Castro

Profesor

Hace 4 años

Mariana Contreras

Hace 4 años

Diego Reyes Cabrera

Hace 4 años

Rodrigo Angel Zucchini

Hace 4 años

Federico Ivan Llano

Hace 4 años

Gilbert Ardila

Hace 4 años

Luis Angel Olivárez Estrada

Hace 4 años

Samuel Miranda Martínez

Hace 4 años

Edier Gama

Hace 4 años

Jesus Alberto Garzon Castillo

Hace 4 años

Bramucci Candela

Hace 4 años

Diego Portillo

Hace 3 años

Ariel Ezequiel Biazzo Genua

Seba Cardoso

Gilbert Ardila

Seba Cardoso

Neil Ruiz

Elam Vera

Mateo Alberto Ossa Barrios

Hace 3 años

Mateo Alberto Ossa Barrios

Hace 3 años

John Malku Córdova Sinchico

Alejandro Calderón

Max Andy Diaz Neyra

Laura Naranjo

Alexander Flores Rayme

Hace 3 años

César Augusto Cortés Labrada

Hace 4 años

Juan Pablo Cortés

Hace 4 años

Recursos

Mejorar la experiencia del usuario en una aplicación con React Router Dom implica resolver un detalle que parece pequeño, pero que marca la diferencia: redirigir al usuario después del login a la URL desde la que llegó, no a una página por defecto como /profile. Este reto es ideal si ya entiendes rutas privadas y protegidas y quieres dar un paso más en user experience.

¿Por qué importa el redirect inteligente después del login?

Imagina que entras a editar un blog post específico, pero no estás autenticado. La aplicación te manda al formulario de login, te autenticas y, en lugar de devolverte a esa URL puntual, te lleva a tu perfil.

Ahí pasa el problema de UX: tú no querías ver tu perfil, querías terminar la acción que iniciaste. La aplicación rompe la intención original del usuario y lo obliga a navegar de nuevo hasta donde estaba.

¿Qué es un redirect en una aplicación web? Es una redirección automática que envía al usuario de una URL a otra, normalmente para proteger rutas privadas o forzar autenticación antes de mostrar cierto contenido.

¿Cómo resolver el redirect con useLocation en React Router Dom?

La pista principal del reto [01:45] es el hook useLocation. Este hook te entrega información sobre la ruta actual y permite pasarle al login la referencia de la página desde la cual se hizo el redirect.

La idea general se resume en tres pasos:

Cuando una ruta protegida hace redirect al login, guarda la ubicación original usando useLocation.
Pasa esa ubicación al componente de login como state o como parámetro.
Después de autenticar, lee esa referencia y haz redirect a esa URL en lugar de mandar al profile.

Si el usuario llegó al login directamente, sin venir de una ruta protegida, entonces el comportamiento por defecto sigue siendo enviarlo a su perfil.

¿Qué hace exactamente useLocation?

Es un hook de React Router Dom que te devuelve el objeto location actual. Con él puedes leer el pathname, los parámetros de búsqueda y cualquier state que se haya pasado al navegar.

En este reto, useLocation es la herramienta que conecta dos momentos: el instante en que se intercepta al usuario y el instante en que se le devuelve a su destino original.

¿Por qué useLocation y no useNavigate? useNavigate sirve para ejecutar la navegación, pero useLocation es la que te da el contexto de dónde está el usuario y de dónde viene. Las dos se complementan.

¿Cómo abordar el reto paso a paso?

Antes de escribir código, vale la pena pensar la lógica como un flujo. El usuario entra a una URL protegida, el sistema lo intercepta, lo manda al login con una pista de hacia dónde quería ir, y al autenticarse esa pista se usa para devolverlo.

Detecta la ruta original en el momento del redirect hacia el login.
Almacena esa ruta de forma accesible para el formulario de autenticación.
Al completar el login, lee esa ruta y ejecuta la navegación final.
Si no hay ruta guardada, redirige al profile como acción por defecto.

¿Existe un ejemplo oficial en React Router Dom?

Sí. La documentación oficial de React Router Dom incluye un ejemplo con un comportamiento muy parecido [02:30], que sirve como referencia para entender el patrón. No es la misma aplicación, pero la filosofía es la misma: usar el estado de navegación para preservar la intención del usuario.

¿Qué soluciones alternativas puedes explorar?

Aunque la pista oficial es useLocation, este tipo de problemas admite varios enfoques. Puedes resolverlo con:

useLocation combinado con useNavigate y el state de la ruta.
Parámetros en la URL del login, tipo /login?redirect=/edit/post-123.
Almacenamiento temporal en context o en un store global.
localStorage o sessionStorage, aunque suele ser menos elegante para este caso.

Cada opción tiene ventajas y costos. La de useLocation con state es la más idiomática dentro de React Router Dom, pero si llegaste a una solución distinta, también es válida mientras conserve la intención original del usuario.

Comparte en los comentarios qué camino tomaste, qué decisiones de diseño tomaste detrás de tu implementación y si encontraste alguna fricción. La idea es tener una discusión sana sobre cuál es la mejor forma de resolver este problema de UX.

Para resolver el segundo reto utilizando location lo que debemos hacer (o al menos eso entendí) es:

Dentro de nuestro <AuthRoute> llamar al useNavigate

const location = useLocation();

como AuthRoute envuelve a nuestras rutas protegidas location.pathname tomara el valor de la ruta a la que intentamos entrar antes del redirect a LoginPage.

Lo siguiente es guardar este valor dentro de la propiedad state

Navigate to='/login' state={{ from: location }} replace />

Debemos colocar el atributo replace el cual nos permitirá hacer el redirect.

Ahora debemos modificar nuestro método login dentro del AuthProvider para ello debemos llamar al hook useLocation tal como en el paso uno y crear una variable from que nos ayudara a apuntar al valor guardado en location del AuthRoute

let from = location.state?.from?.pathname || -1;

aqui le decimos que from es de existir (solo existe este valor si fuimos redirigiros desde una ruta protegida) igual al valor guardado en el Navigate del AuthRoute sino sera igual a la ultima ruta no protegida en la que estuvo el usuario (en el ejemplo del recurso se establece que sea siempre el home "/").

ahora solo nos queda modificar el método navigate para que nos rediría a la dirección del from en lugar de profile.

navigate(from, { replace: true })

notese que como segundo parametro pasamos el replace a true. esto nos ayuda a que no nos rediría al perfil como establece el método login de LoginPage sino que nos lleve a la ruta del from de nuestro AuthProvider.

Si hay algo de lo que haya escrito que este errado por favor déjamelo saber con tu comentario igual si te fue de ayuda.

De mucha ayuda, gracias y que explicación tan detallada entendí a la perfección tu solución.

Replace no es para lo que dices, Replace es para que la "pagina" actual sea reemplazada en el historial del navegador por la nueva pagina a la que vamos, para que asi el boton de ir a atras, en este caso, no nos lleve a login nuevamente.

Encontré que <Navigation tiene la opción para regresar a la pagina que se llama en el location... Nose si esta opción es la mejor ? Me funciona pero nose si pueda hacerse de una mejor manera ?

Al llamar la ruta se hace de esta forma en el auth.js

function AuthRoute(props) {
  const auth = useAuth();

  const location = useLocation();
  
  if(!auth.user) {
    return <Navigate to = "/login" state={{ from: location }} replace />;
  }
  return props.children;
}

const login = ({ username }) => {
    const isAdmin = adminList.find(admin => admin === username);
    const isSuperAdmin = superAdminList.find(item => item === username);
    setUser({ username, isAdmin, isSuperAdmin });
    navigate(from, { replace: true });
  };

y en el LoginPage

if(auth.user) {
    navigate(from, { replace: true });
  }

Todo el codigo quedaria asi:

auth.js

import React  from 'react';
import { Navigate, useLocation, useNavigate } from 'react-router-dom';

const superAdminList = ['Diana'];
const adminList = ['Caro', 'Daniel'];

const AuthContext = React.createContext();

function AuthProvider({ children }) {
  const navigate = useNavigate();
  const [user, setUser] = React.useState(null);
  const location = useLocation();
  const from = location.state?.from || "/";

  const login = ({ username }) => {
    const isAdmin = adminList.find(admin => admin === username);
    const isSuperAdmin = superAdminList.find(item => item === username);
    setUser({ username, isAdmin, isSuperAdmin });
    navigate(from, { replace: true });
  };
  
  const logout = () => {
    setUser(null);
    navigate('/');
  };
  
  const auth = { user, login, logout };

  return (
    <AuthContext.Provider value={auth}>
      {children}
    </AuthContext.Provider>
  );
}

function useAuth() {
  const auth = React.useContext(AuthContext);
  return auth;
}

// Si no esta logueado redireccione a Login
function AuthRoute(props) {
  const auth = useAuth();

  const location = useLocation();
  
  if(!auth.user) {
    return <Navigate to = "/login" state={{ from: location }} replace />;
  }
  return props.children;
}

export {
  AuthProvider,
  useAuth,
  AuthRoute
};

LoginPage.js

import React from 'react';
// import { Navigate } from 'react-router-dom';
import { useNavigate, useLocation } from 'react-router-dom';
import { useAuth } from './auth';

function LoginPage() {
  const auth = useAuth();
  const [username, setUsername] = React.useState('');
  const navigate = useNavigate();
  const location = useLocation();
  const from = location.state?.from || "/";


  const login = (e) => {
    e.preventDefault();
    auth.login({ username });
  };

  if(auth.user) {
    navigate(from, { replace: true });
  }
  
  return (
    <>
      <h2>Login</h2>

      <form onSubmit={login}>
        <label>Escribe tu nombre de usuario:</label>
        <input
          value={username}
          onChange={e => setUsername(e.target.value)}
        />

        <button type="submit">Entrar</button>
      </form>
    </>
  );
}

export { LoginPage };

:clap::clap::clap:

Beatiful and elegant

location.state

Investigué sobre el hook useLocation y noté que en el objeto que devuelve hay una propiedad state. Esa propiedad state puede ser manipulada desde varias funciones o componentes, como por ejemplo:

const location = useLocation()
const navigate = useNavigate()
navigate("/login", { 
	state: 
		{ prevPath: location.pathname } 
	}

ó...

<Navigate to="/login" state={ { prevPath: location.pathname } }

. Esta propiedad state la recibo desde mi función de login, y cuando el usuario se loggea, verifico si viene desde una redirección que setteó un state con prevPath!

const login = (username, role) => {
		setUser({ username, role });

		if (state) {
			navigate(state.prevPath);
			delete state.prevPath;
			return;
		}
		navigate("/profile");
	};

Esa fue mi solución!

Espero haberme dado a entender

Yo use navigate(-1) cuando se dispara la funcion del login, fue lo mas sencillo que encontre para mi codigo 😄

<code> 
import React from 'react’
import { useNavigate } from ‘react-router-dom’

export const Login = ({ name, setName, login, setLogin}) => {

const navigate = useNavigate()

const onLogin = (e) => {
e.preventDefault()
setLogin(!login)
navigate(-1)
}

return (
<>
<h4>Inserte su nombre</h4>
<form onSubmit={onLogin}>
<label>Nombre</label>
<input type=“text” value={name} onChange={e => setName(e.target.value)} />
<button type=“submit”>Login</button>
</form>
</>
)
}

pense lo mismo, la opcion vaga jajaj

bueno mi solución fue usar un estado inicializado en un arreglo vacío en el auth.jsx, allí mismo en la función login verifico si el arreglo está vacío después de hacer login lo redirijo a home, si el arreglo no está vacío hago un window.history.back() que me lleva a la última página vista. usando el use context llamo ese estado en cada página y con un useEffect cada vez que se renderice una página pongo dentro del arreglo el location.href. es decir si la persona llega directamente al login el arreglo está vacío y lo envía al home, si la persona llega a home y ver por ejemplo la página de blog y de allí pasa a loguearse el arreglo ya no está vacío y lo envía a la última página vista que en este caso sería blog!!!

Yo pensé en esa misma solución :)

Una posible solución al reto usando Redux

Cuado se ingrese a la ruta privada, voy a guardar la ruta en el estado desde location.pathname, al usuario lo redirecciono al login como se hizo en clase, pero cuando haga el login exitosamente valido si en el estado hay una ruta guardada, para saber que pagina le muestro. Para finalizar, para borrar el estado, valido si el usuario se encuentra en la misma ruta que se guardo la primera vez, y borro el estado.

Repositorio en GitHub

Link del proyecto desplegado

auth-router.jsx

import React, { useEffect } from 'react';
import PropTypes from 'prop-types';
import { useSelector, useDispatch } from 'react-redux';
import { Navigate, useLocation } from 'react-router-dom';

import { setLastUrlAction } from '@modules/nav/actions';
import { getAuth, isAuthSuccess } from '@modules/auth/selectors';
import { getLastUrl } from '@modules/nav/selectors';

const AuthRoute = ({ children }) => {
  const dispatch = useDispatch();
  const location = useLocation();

  const auth = useSelector(getAuth);
  const isSuccess = useSelector(isAuthSuccess);
  const lastUrl = useSelector(getLastUrl);

  if (!auth?.email && !isSuccess && !lastUrl) {
    dispatch(setLastUrlAction(location.pathname));
    return <Navigate to="/login" />;
  }

  useEffect(() => {
    if (location.pathname === lastUrl) {
      dispatch(setLastUrlAction(undefined));
    }
  }, []);

  return children;
};

AuthRoute.propTypes = {
  children: PropTypes.element.isRequired,
};

export default AuthRoute;

import React, { useState, useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { useNavigate } from 'react-router-dom';

import { loginAction } from '@modules/auth/actions';
import {
  getAuth,
  isAuthSuccess,
  getAuthErrorDetail,
  isAuthError,
  isAuthLoading,
} from '@modules/auth/selectors';
import { getLastUrl } from '@modules/nav/selectors';

import Loader from '@components/loader';
import Error from '@components/error';

import Button from '@ui/button';
import Input from '@ui/input';

import './login.scss';

const Login = () => {
  const navigate = useNavigate();
  const dispatch = useDispatch();

  const auth = useSelector(getAuth);
  const isSuccess = useSelector(isAuthSuccess);
  const isLoading = useSelector(isAuthLoading);
  const isError = useSelector(isAuthError);
  const errorDetail = useSelector(getAuthErrorDetail);

  const lastUrl = useSelector(getLastUrl);

  const [email, setEmail] = useState('');

  const handleLogin = (event) => {
    dispatch(loginAction({ email }));
    event.preventDefault();
  };

  useEffect(() => {
    if (isSuccess && auth?.email) {
      if (lastUrl) {
        navigate(lastUrl);
      } else {
        navigate('/');
      }
    }
  }, [auth, isSuccess, lastUrl]);

  return (
    <section className="Login">
      <div className="Login__container">
        <h2>Inicio de sesión</h2>
        <form onSubmit={handleLogin}>
          <Input
            value={email}
            onChange={(event) => setEmail(event.target.value)}
          />
          <Button primary type="submit" onClick={() => {}}>
            Iniciar sesión
          </Button>
        </form>
      </div>
      {isLoading && <Loader />}
      {isError && <Error error={errorDetail} />}
    </section>
  );
};

export default Login;

actions.js

import { SET_SEARCH, SET_LAST_URL } from './types';

export const setSearchAction = (payload) => ({
  type: SET_SEARCH,
  payload,
});

export const setLastUrlAction = (payload) => ({
  type: SET_LAST_URL,
  payload,
});

reducer.js

import { SET_SEARCH, SET_LAST_URL } from './types';

export const initialState = {
  search: undefined,
  lastUrl: undefined,
};

// eslint-disable-next-line default-param-last
const navReducer = (state = initialState, action) => {
  switch (action.type) {
    case SET_SEARCH: {
      return {
        ...state,
        search: action.payload,
      };
    }
    case SET_LAST_URL: {
      return {
        ...state,
        lastUrl: action.payload,
      };
    }
    default:
      return state;
  }
};

export default navReducer;

selectors.js

import { createSelector } from '@reduxjs/toolkit';

export const selectNav = (state) => state.nav;

export const getSearch = createSelector(selectNav, (auth) => auth.search);
export const getLastUrl = createSelector(selectNav, (auth) => auth.lastUrl);

Esta es mi solución usando useLocation y useRef

oye no entiendo como usas el useref si no apuntas a nada me podrias explicar o alguien me podria explicar?

Costó, pero está terminado.

Cambios en auth.js

// ...
  const login = ({ username, locationAfterLogin }) => {
        const isModerator = moderators.find(mod => mod === username)
        const isSpellChecker = spellCheckers.find(sp => sp === username)
        const isEditor = editors.find(ed => ed === username)

        setUser({ username, isModerator, isEditor, isSpellChecker })
        navigate(locationAfterLogin)
    }
// ...
export function AuthRoute({ children }) {
    const auth = useAuth()
    const { pathname } = useLocation()

    if (!auth.user)
        return <Navigate to="/login" state={{ locationAfterLogin: pathname }} />
    return children
}
// ...

Cambios en LoginPage.js

// ...
  const { state } = useLocation()
    let locationAfterLogin
    state
        ? (locationAfterLogin = state.locationAfterLogin)
        : (locationAfterLogin = '/profile')

    if (auth.user) return <Navigate to="/profile" replace />

    const login = e => {
        e.preventDefault()
        auth.login({ username, locationAfterLogin })
    }
// ...

Yo simplemente agrego

navigate(-1)

A la ultima linea de la funcion login() para redirigir a la ultima vista en lugar del profile.

Sii, yo también!

Quizas también funcione con -2, porque puede que con -1 vuelvas al mismo lugar de donde empezaste.

Aca dejo el reto:

Pero antes de verlo te reto a pienses un rato. Yo te doy otra pista. Tenes que usar el estado de la navegacion.

=====

// App.js
<Route path="/" element={<RequireAuth />}>
	<Route index element={<Home />} />
	{/* Mis rutas */}
</Route>
<Route path="auth" element={<Unauthenticated />}>
	<Route path="login" element={<Login />} />
	{/* Mis rutas signup, login, forgotPassword, etc*/}
</Route>

// RequireAuth.js
import { useLocation, Navigate, Outlet } from 'react-router-dom'
const RequireAuth = () => {
  const location = useLocation()
  return isAuthenticated ? (
    <Layout>
       <Outlet />
    </Layout>
    : (
      <Navigate to="/auth/login" state={{ from: location }}  />
    )
}

export default RequireAuth

// Unauthenticated.js
import { Outlet, useLocation } from 'react-router-dom'
const location = useLocation()
const from = location.state?.from?.pathname || '/'
return isAuthenticated ? (
    <Navigate to={from} replace />
  ) : (
    <Outlet />
  )

Hola Seba gracias por el aporte. Me nace una pregunta, en RequireAuth.js ese Layout a qué hace referencia. gracias y disculpa

Hola. Ese Layout no es necesario. En el ejemplo me falto importarlo. Pero supongamos que en todas tus rutas tenes un Header y un Footer, entonces podriamos tener nuestro componente Layout asi:

import Header from './Header'
import Footer from './Footer'

function Layout({children}) {
	return (
		<Header/>
		{children}
		<Footer/>
	)
}
export default Layout

En mi opinión, para resolver este reto lo primero que se debe hacer es construir las condiciones que el profesor plantea, las cuales corresponden a que un usuario que utilice la opción “Blog” del menú, se le exija realizar login, para que una vez cumpla con este requisito, se redirija la navegación a la ruta /blog, en lugar de a la ruta/profile. Esto debe hacerse utilizando un hook muy importante llamado useLocation del que ameritaba una gran clase que lamentablemente decidieron convertirla en este reto. Para construir esta condición se requiere modificar el archivo App.jsx, para proteger el componente BlogPage, envolviéndolo en el componente AuthRoute, como se hizo con el componente ProfilePage, excepto que la ruta asociada a BlogPage seguirá sin ser privada. Esto permitirá que la opción “Blog” del menú se renderice en el navegador, pero su uso exigirá realizar login.

Después de crear las condiciones, ahora es posible resolver el reto planteado cuyo objetivo es el de que la aplicación recuerde desde qué página el usuario fue enviado al login, para luego redirigirlo de vuelta a ese punto exacto y la mejor forma de hacerlo es utilizando uno de los 4 escenarios en los que se recomienda utilizar el hook useLocation. En dicho escenario, se pretende acceder a datos de estado enviados entre rutas, pero dado que su explicación puede ser algo extensa, les sugiero leer sobre el tema y les comparto la solución que logré implementar, la cual requirió ajustar el componente AuthRoute que hace parte del archivo auth.jsx, debido a que este componente es el encargado de proteger rutas y es allí en donde se debe usar useLocation().

import { createContext, useContext, useState } from "react";
import { useNavigate, Navigate, useLocation } from "react-router-dom";

const adminList = ['Irisval', 'Retaxmaster', 'freddier'];

const AuthContext = createContext();

function AuthProvider({ children }) {
  const navigate = useNavigate();
  const [user, setUser] = useState(null);

  const login = ({ username }) => {
    const isAdmin = adminList.find(admin => admin===username)
    setUser({ username, isAdmin });
    navigate("/profile");
  };

  const logout = () => {
    setUser(null);
    navigate("/");
  };

  const auth = { user, login, logout };
  return <AuthContext.Provider value={auth}>{children}</AuthContext.Provider>;
}

function useAuth() {
  const auth = useContext(AuthContext);
  return auth;
}

function AuthRoute(props) {
  const auth = useAuth();
  const location = useLocation();

  if (!auth.user) {
    return <Navigate to="/login" state={{ from: location }} replace/>;
  }

  return props.children;
}

export {
    AuthProvider,
    useAuth,
    AuthRoute,
};

Además fue necesario ajustar el archivo LoginPage.jsx, ya que para completar el flujo, este componente debe leer el state que envió AuthRoute y pasarlo a la función login.

import { useState } from 'react';
import { useAuth } from './auth';
import { useLocation, useNavigate } from 'react-router-dom';

function LoginPage () {
    const auth = useAuth();
    const [username, setUsername] = useState ('')
    const navigate = useNavigate();
    const location = useLocation();

    const from = location.state?.from?.pathname || '/profile';

    const login = (e)=>{
        e.preventDefault();
        auth.login ({username});
        navigate(from, { replace: true });
    }

    return (
        <>
            <h1>LoginPage</h1>
            <form onSubmit={login}>
                <label>Escribe tu nombre de usuario:</label>
                <input 
                value={username}
                onChange={e => setUsername (e.target.value)} />
                <button type='submit'>Entrar</button>
            </form>
        </>
    )
}

export {LoginPage};

Como me coste este reto, gracias a la comunidad pude lograrlo la verdad

yo lo resolví solo haciendo modificaciones en el authProvider usando el useLocation, haciendo push de cada ruta por la que paso en un array usando React.useState, y luego vacío el array despues de hacer login o logout para que no se llene mucho

function AuthProvider({ children }) {
  const navigate = useNavigate();
  const location = useLocation();

  const [user, setUser] = React.useState(null);
  const [locations,setLocations]= React.useState([])

  React.useEffect(()=>{
    setLocations((prev)=>[...prev,location])
  },[location])

  const login = ({ username }) => {
    const isAdmin = adminList.find(admin => admin === username);
    const lastLocation=locations.slice(-2)[0].pathname
    setUser({ username, isAdmin });
    console.log(lastLocation);
    (!locations.slice(-2)[0].pathname || 'login')?navigate('/profile'):navigate(lastLocation);
    setLocations([])
  };
  
  const logout = () => {
    setUser(null);
    navigate('/');
    setLocations([])

  };

me acabo de dar cuenta que cometí un error y no se como eliminar este comentario, asi es como debería quedar:

const navigate = useNavigate();
  const location = useLocation();

  const [user, setUser] = React.useState(null);
  const [locations,setLocations]= React.useState([])

  React.useEffect(()=>{
    setLocations((prev)=>[...prev,location])
  },[location])

  const login = ({ username }) => {
    const isAdmin = adminList.find(admin => admin === username);
    const lastLocation=locations.slice(-2)[0].pathname
    setUser({ username, isAdmin });
    console.log(lastLocation);
    console.log(!lastLocation || '/login');
    (!lastLocation || lastLocation==='/login')?navigate('/profile'):navigate(lastLocation);
    setLocations([])
  };
  
  const logout = () => {
    setUser(null);
    navigate('/');
    setLocations([])

  };

mi solucion fue esta , obvio hay mas codigo para manejar los otros estados pero para el reto de esta clase creo que fue lo mas conveniente

const onLogin = () => { const historial = window.history if(historial.length>3){navigate(-2)} navigate('/profile') }

Redirrecion a la pagina solicitada originalmente

1.) Privatizamos al componente EDIT con nuestro AuthRouter: App.js

 <Route path="/blog/:slug/edit/:id" element{<AuthRouter><Edit /></AuthRouter>} />

2.) Modificamos "AuthRouter":

const AuthRouter = ({ children }) => {
  const auth = useAuth();
  const location = useLocation();
  const navigate = useNavigate();

  useEffect(() => {
    if (!auth.user.name) {
      navigate("/login", {
        state: {
          prev: location.pathname,
        },
      });
    }
  }, []);
  return children;
};

Nuestra propiedad state se activa solo cuando existe una redireccion y transmite algun valor entre los componentes involucrados. En nuestro caso, si el usuario tiene la url directa a /profile o /edit/:id, lo redireccionara a "/login" pero en state guardaremos la url de donde empezamos a navegar.

3.) Ahora, vamos al componente receptor y mostremos en consola los datos que trajo de la anterior url:

Login.js

  const location = useLocation();

  useEffect(() => {
    console.log(location);
  });

4.) Por ultimo, cuando el usuario termine su registro:

  function handleSubmit(event) {
    event.preventDefault();
    auth.login(user);
    navigate(location.state?.prev || "/");
  }

En mi caso, el state lo llame como prev y guarda una url (de donde nos redireccionaron). Un default value "/" en caso de no haber redireccion.

Comentarios y sugerencias bienvenidas.

Código del reto en TS: Pensé en utilizar el context de auth para transferir esa información pero viendo los comentarios vi que react router ya trabaja con variables y pues una gran oportunidad para usarlo:

import { createContext, FC, useState, PropsWithChildren } from 'react'
import { useLocation, useNavigate } from 'react-router-dom'

interface User {
    username: string,
    isAdmin: boolean,
}

interface Auth {
    user: User | null
    login: (value: Omit<User, "isAdmin">) => void
    logout: () => void,

}

// interface Auth {
//     user: { username: string } | null
//     login: (user: Auth['user']) => void
//     logout: () => void
// }

const adminList = ['Max', 'Emma', 'Aleksei'];

const AuthContext = createContext({} as Auth);

const AuthProvider: FC<PropsWithChildren> = ({ children }) => {

    const { state } = useLocation();
    const navigate = useNavigate();
    const [user, setUser] = useState<Auth['user']>(null);

    const login: Auth['login'] = ({ username }) => {
        const isAdmin = adminList.some(admin => admin === username);
        setUser({ username, isAdmin });
        navigate( state.from || '/profile');
    }

    const logout: Auth['logout'] = () => {
        setUser(null);
        navigate('/');
    }

    const auth: Auth = { user, login, logout }

    return (
        <AuthContext.Provider value={auth}>
            {children}
        </AuthContext.Provider>
    )
}

export { AuthProvider, AuthContext }

import { Navigate, useLocation } from "react-router-dom";
import { useAuth } from "./useAuth"
import { FC, PropsWithChildren } from "react";

const AuthRoute:FC<PropsWithChildren> = ({ children }) =>{

    const auth = useAuth();
    const { pathname } = useLocation();

    if(!auth.user) return <Navigate to="/login" state={{
        from: pathname
    }} />

    return  children;
}

export { AuthRoute }

Analizando useLocation(), se me ocurre que puede ser muy útil para pasar información de una ruta a otra, mediante location.state, cuando navegamos con el componente Navigate o con el hook useNavigate(), por ejemplo, un escenario de formulario paso a paso, donde cada paso, depende de la información del paso anterior.

Lo intente bro pero no pude GG Mas adelante lo intentare solo estuve 3 horas intentando seguro maña lo hare, no me eh rendido solo lo hare después.

Para resolver el reto usé un useLocation y el buen useEffect. En mi caso tengo un custom hook llamado useAuth.jsx. Dentro del hook cree un estado para actualizar la localización dependiendo de donde esté el usuario (/home, /blog /blopost/:plug).

en el return mando la función upDateLocation y todos estos datos los recibo en mi componente <Layout> el cual contiene las rutas hijas con un <Outlet> (excepto el <Menu> que está por fuera)

Gracias al context que admite <Outlet> estoy compartiendo los datos com todos los demás componentes. La idea ahora es actualizar con setLocation dependiendo en que ruta estuviere el usuario de esta manera:

Aquí estoy en el componente <BlogPage> e intento actualizar el estado location que está en mi custom hook useAuth enviando por parámetro la ruta con el location.pathname que me ofrece useLocation(). Pero obtengo el siguiente error.

Dice que no puedo actualizar al componente layout mientras trato de renderizar por primera vez al componente blogpage. Espero se pueda apreciar en la foto. Entonces lo pude corregir de esta manera:

Uso un useEffect que se active siempre luego de renderizarse mi componente blogpage y con eso no tuve más ese error. Para terminar así es como desde el componente <LoginPage> hago la navegación

Le mando como parámetro a navigate el estado actual con la última ruta visitada por el usuario. De esta manera usé el useEffect en los demás componentes y de la misma forma comparto el estado con "const [authData] = useOutletContext();". La aplicación funciona haciéndolo así pero claro que no sé si será la mejor idea. Bueno pero se logró el reto XD.

Mi solucion no es nada elegante. Elimine el componente Navigate y lo reemplace con el hook useNavigate.

function AuthRoute({ children }) {
    const auth = useAuth();
    const notAuthorized = () => {
	return auth.navigate('/login')
}
    if(!auth.user) {

        return (
            <>
            <p>Deberías iniciar sesión primero</p>
            <button
             onClick={notAuthorized}
             >Loging</button>
            </>
        )
    }
    return children
}

En la funcion login de AuthProvider cambie navigate('/profile') a navigate(-1) asi:

const login = ({ username }) => {
        const staff = users.find(user => user.name === username);
        staff !== undefined ?
        setUser(staff) :
        setUser({ name: username, role: roles.visitor });
        navigate(-1);
    }

Además también quite el condicional en LoginPage

 // if(auth.user) {
    //     return <Navigate to={'/profile'}/>
       
    // }

Fundamentos de navegación en la web

Cuándo y por qué usar React Router

SSR vs SPA: cómo funciona cada una

Uso de React Router DOM 6 en Proyectos React

Introducción a React Router DOM 6

Instalar React Router Dom 6 paso a paso

Browser Router vs Hash Router en GitHub Pages

Primeras rutas con React Router Dom 6

Link y NavLink para navegación en React

Rutas dinámicas con React Router DOM y useParams

useNavigate para navegar con JavaScript

Outlet y rutas anidadas en React Router

Fake authentication con React Router DOM 6

Rutas privadas con fake auth en React

Rutas privadas y públicas en React

Rutas protegidas con Navigate en React

Roles y permisos en aplicaciones web: Autenticación y autorización

Retos avanzados en React: manejo de estado y composición de componentes

Redirect al login con useLocation en React

Rutas dinámicas con roles de usuario

React Router en TODO Machine

Cómo migrar React portals a rutas reales

Estructura de carpetas con React Router Dom 6

Botón de editar todos con React y SVG

Generación de IDs únicos para gestionar tareas en React

Migrar modales a rutas con useNavigate

Cómo funciona editTodo con useParams

Texto por defecto en textarea con useLocation

Implementación de React Router en Proyectos Legacy

Próximos pasos

Sincronizar el buscador con la URL

Migrando a React Router Dom 5 en proyectos reales

Migra Platzi Movies de JS a React

Clonar React Router desde cero

Navegación Avanzada con React Router DOM 6

Redirect al login con useLocation en React