Estoy creando un sitio en reaccionar que tiene una página de autenticación inicial y una ruta protegida al panel de administración que se muestra cuando el usuario inicia sesión.

 //route for authentication <Route exact path="/" element={<AuthLayout />}> <Route index element={<Login />} /> </Route> //route for for the board <Route path="/admin" element={<RutaProtegia />}> <Route index element={<Home />} /> <Route path="products"> <Route index element={<List />} /> <Route path=":productId" element={<Single />} /> <Route path="new" element={<New inputs={productInputs} title="Add New Product" />} /> </Route> </Route>

La ruta protegida contiene la validación de si el usuario existe y en base a esto muestra un <Outlet/>

 import { Outlet, Navigate } from "react-router-dom" import useAuth from "../hooks/useAuth" export const RutaProtegia = () => { const { auth, cargando } = useAuth(); return ( <> {auth?._id ? <Outlet /> : <Navigate to="/" />} </> ) }

El error se genera al intentar ingresar a la ruta /productos, es en este punto donde la consola me muestra el siguiente error No routes matched location "/products"