es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Las páginas de GH no cargan la ruta predeterminada.

05 Aug, 2023 Programación

Agregué mi primer proyecto simple de React a GH Pages.

Localmente, cuando usé

<route exact="" path='/' element="{"></route><home></home>} />

Después de ejecutar la aplicación, me redirige a la ruta /Home. No sé cómo lograr esto en ghpages, intenté agregar el nombre del repositorio o qué enlaces mostrar, pero no funcionó.

Agradecería ayuda 🙂

{
        <route exact="" path='/' element=""></route><home></home>} />
        <route path='/NailsByEc' element=""></route><home></home>} />
        <route path='/NailsByEc/?fbclid=IwAR0fesoX_SkuQoA2kgz70b9fXx7kC6FjDDGDGjp39AIj_ZDDKPrpl3MZuAE' element=""></route><home></home>}
        />
        <route path='/home' element=""></route><home></home>} />
        <route path='/gallery' element=""></route><gallery></gallery>} />
        <route path='/offer' element=""></route><offer></offer>} />
        <route path='/about' element=""></route><about></about>} />
}

Tags:  , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Parece que el problema que estás enfrentando está relacionado con el enrutamiento en tu aplicación React cuando se despliega en GitHub Pages.

    Cuando despliegas una aplicación React en GitHub Pages, la URL base cambia a <nombre-de-usuario>.github.io/<nombre-del-repositorio>. Esto significa que todas las rutas que has definido en tu aplicación React deben actualizarse para incluir esta URL base.

    Para solucionar este problema, puedes intentar actualizar tus rutas de la siguiente manera:

    <route exact="" path="{`${process.env.PUBLIC_URL}/`}" element=""></route><home></home>} />
<route path="{`${process.env.PUBLIC_URL}/NailsByEc`}" element=""></route><home></home>} />
<route path="{`${process.env.PUBLIC_URL}/NailsByEc/?fbclid=IwAR0fesoX_SkuQoA2kgz70b9fXx7kC6FjDDGDGjp39AIj_ZDDKPrpl3MZuAE`}" element=""></route><home></home>} />
<route path="{`${process.env.PUBLIC_URL}/home`}" element=""></route><home></home>} />
<route path="{`${process.env.PUBLIC_URL}/gallery`}" element=""></route><gallery></gallery>} />
<route path="{`${process.env.PUBLIC_URL}/offer`}" element=""></route><offer></offer>} />
<route path="{`${process.env.PUBLIC_URL}/about`}" element=""></route><about></about>} />

    Aquí estamos utilizando process.env.PUBLIC_URL para obtener la URL base de la aplicación desplegada y agregándola a las rutas. Esto debería garantizar que el enrutamiento funcione correctamente cuando la aplicación se despliegue en GitHub Pages.

    Además, asegúrate de haber configurado el campo homepage en tu archivo package.json con la URL de tu sitio de GitHub Pages:

    {
  "name": "mi-app",
  "homepage": "https://lcse1706.github.io/NailsByEc",
  // ...
}

    Espero que esto te ayude a resolver el problema de enrutamiento en tu aplicación React en GitHub Pages. ¡Avísame si necesitas ayuda adicional!

Comments are closed.