en proceso de aprender un poco React y en mi primera aproximación, estoy teniendo el primer inconveniente:
Este es mi archivo router.jsx
import {createBrowserRouter} from 'react-router-dom'
import Authlayout from './layouts/Authlayout'
import Layout from './layouts/Layout'
import Inicio from './views/Inicio'
import Login from './views/Login'
import Registro from './views/Registro'
const router = createBrowserRouter([
{
path: '/',
element: <Layout />,
children:[
{
index:true,
element: <Inicio/>,
}
]
},
{
path: 'auth',
element: <Authlayout />,
children: [
{
path: 'auth/login',
element: <Login />,
},
{
path: 'auth/registro',
element: <Registro />,
}
]
}
])
export default router
este otro archivo es mi Login.jsx
export default function Login() {
return (
<div>Login</div>
)
}
y por último, les muestro el archivo Registro.jsx
export default function Registro() {
return (
<div>Registro</div>
)
}
ahora bien, si intento utilizar la ruta http://127.0.0.1:5173/auth, me devuelve correctamente el Authlayout, pero al convocar http://127.0.0.1:5173/auth/login, me tira el siguiente error:
y no puedo resolver esta cuestión. ¿Alguien me podría ayudar? Desde ya, saludos y muchas gracias.