0

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: introducir la descripción de la imagen aquí

y no puedo resolver esta cuestión. ¿Alguien me podría ayudar? Desde ya, saludos y muchas gracias.

1 respuesta 1

1

Tu problema se encuentra exactamente en cómo estás definiendo los paths del children de tu ruta auth. Como ya tienes definido tu ruta padre auth, ya no es necesario que vuelvas a repetir dicha ruta en las rutas hijas. Por lo tanto, tu router quedaría de esta forma:

const router = createBrowserRouter([
  {
        path: '/',
        element: <Layout />,
        children:[
              {
                    index:true,
                    element: <Inicio/>,
              }
        ]
  },
  {
        path: 'auth',
        element: <Authlayout />,
        children: [
              {
                    path: 'login',
                    element: <Login />,
              },
              {
                    path: 'registro',
                    element: <Registro />,
              }
        ]
  }])

Puedes revisar más en la documentación de React Router Dom: https://reactrouter.com/en/main/routers/create-browser-router

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.