Code review: Protección de Rutas

Hola, tengo una duda, quisiera hacer rutas dinámicas sin embargo no lo he logrado, el código es el siguiente: (al final hace cosas raras y no termina por tomar las rutas bien) 

Yo cree una funcion en el contexto que retorna los dos valores y asi no repito tanto el codigo 

Les comparto como decidí realizar la protección de rutas. Primero realiza el ejercicio y una vez hecho ahora sí mira esta implementación 😀.
 

• En primer lugar decidí permitirle el acceso al usuario a la ruta Home y con sus categorias. El resto de rutas (ordenes, mi cuenta, luego del checkout…) sí están protegidas.
• Dejé de usar el hook useRoutes e importé Routes y Route de react.
• Organicé las rutas como normalmente lo haría con estas librerías importadas.
• Creé el componente PrivateRoutes usando Outlet y Navigate de react-router-dom. En este es en donde debemos de colocar nuestro condicional del cual dependerán las rutas protegidas (en este caso decidí depender del signOut state. Si dicho estado es true entonces navegar a ‘sign-in’, si es false entonces Outlet (que puede acceder a las rutas children)).
• Importé este componente PrivateRoutes en App y lo usé con Route como podrás ver a continuación, dejando como children de este componente aquellas rutas que quiero proteger.
   
  // PrivateRoutes.jsx
  
  
   
  // App.jsx
  
  

¡Hola a todos! 👋 Quiero compartirles que la API original del curso está rota, lo que puede dificultar completar los ejercicios. Para ayudarles, he creado una versión funcional del proyecto base con una nueva API y código actualizado. 🚀 Pueden clonar este repositorio para seguir el curso sin problemas: 👉 <<https://github.com/darubiomunoz/prueba-tecnica-reactjs>> Además, si les resulta útil, no olviden darle una estrella ⭐ al repositorio y seguirme en GitHub. ¡Espero que les sea de ayuda y puedan completar el curso con éxito! 💚 ¡Happy coding! 💻

## ✨🦄 Para la protección de rutas Creé dos componentes nuevos, uno que comprueba que exista un usuario autenticado, y el otro que comprueba que ningún usuario está autenticado. Esto debido a que hay vistas que no se deben mostrar cuando un usuario está autenticado o no, pero también existen vistas que solo se deben mostrar cuando el usuario no está autenticado, como el login o el sign out. Así quedó mi estructura de rutas:  Y esta es la manera en que funciona uno de los dos componentes que mencioné 

para lo de las rutas, yo hice otro componente y manejar de esta manera la logica 

En mi caso para que se viera mas lindo y que apenas dentren a la aplicación de una no vieran nada muestro en home con un blanco por delante al 60% y si le dan click a cualquier parte de este lo redireccione a crear cuenta, la creamos y podemos ver todo 

Mi métodos para proteger las rutas son : 1-En el NavBar elimine el componente Link si mi usuario no esta logeado, logrando así eliminar esa interacción.  2-En el App, si el usuario no esta logeado redireccione todos los endpoints hacia \<SignIn/>. Esto lo hice por que si el usuario cambiaba el endpoint desde su navegador podía visualizar de igual manera la página .  Lo que veo de malo en mi solución es que repito mucho código fallando así en el principio de DRY.

Use un custom Hook que usa useReducer para manejar el estado global, y useContext para enviar la información del usuario autenticado, ademas de una funcion requireAuth para comprobar el estado global y la autentocación del usuario y redirigir a las rutas correspondientes. ```js import { useRoutes, BrowserRouter } from 'react-router-dom' import Home from '../Home'; import MyAccount from '../MyAccount'; import MyOrder from '../MyOrder'; import MyOrders from '../MyOrders'; import NotFound from '../NotFound'; import SignIn from '../SignIn'; import Navbar from '../../Components/Navbar'; import CheckoutSideMenu from '../../Components/CheckoutSideMenu' import './App.css' import { ShoppingCartProvider } from '../../Context'; import { AuthProvider, RequireAuth } from '../../Context/useAuth'; import SignUpPage from '../SignUp'; const AppRoutes = ()=>{ let routes = useRoutes([ {path:'/',element: <Home/>}, {path:'/clothes',element: <Home/>}, {path:'/electronics',element: <Home/>}, {path:'/furnitures',element: <Home/>}, {path:'/toys',element: <Home/>}, {path:'/others',element: <Home/>}, {path:'/my-account',element: <RequireAuth><MyAccount/></RequireAuth>}, {path:'/my-order',element: <RequireAuth><MyOrder/></RequireAuth>}, {path:'/my-orders',element: <RequireAuth><MyOrders/></RequireAuth>}, {path:'/my-order/last',element: <RequireAuth><MyOrder/></RequireAuth>}, {path:'/my-order/:id',element: <RequireAuth><MyOrder/></RequireAuth>}, {path:'/sign-in',element: <SignIn/>}, {path:'/sign-up',element: <SignUpPage/>}, {path:'/*',element: <NotFound/>}, ]); return routes; } function App() { return ( <BrowserRouter> <AuthProvider> <ShoppingCartProvider> <AppRoutes/> <Navbar/> <CheckoutSideMenu></CheckoutSideMenu> </ShoppingCartProvider> </AuthProvider> </BrowserRouter> ) } export default App; ```

Les comparto la estrategia que use para proteger las rutas, me parece más sencilla de implementar y mantener. Lo Primero fue modificar las rutas:  Entonces puse un elemento sin ruta llamado ProtectedRoutes, y dentro como hijos puse todas las rutas que deberían estar protegidas. Por fuera de este elemento deje las rutas no protegidas, sign-in y la de notFound. En el componente ProtectedRoutes puse el siguiente código:  Acá traigo del contexto el booleano que me indica si el usuario está logueado o no, y dependiendo retorno Outlet (o sea, lo que le mande como hijo al componente), o una redirección a /sign-in. Y ya eso sería todo.