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 Github HashRouter no muestran componentes.

19 Jun, 2023 Programación

Mi aplicación React en Github page no representa los componentes usando HashRouter, la página en blanco en “/” y error 404 en “/about”.
Este es mi archivo app.js:

“`function App() {
return (
<div classname="Container-fluid" id="div2">
<hashrouter basename="/Landing-Page">
<header></header>

<pre><code> <routes>
<route path="/thankyou" element=""></route><thankyou></thankyou>} />
<route exact="" path="/" element="{"></route><div classname="Container">
<signup validate="{validate}"></signup>
<ebookinfo></ebookinfo>
</div>
}
/>
<route path="/about" element=""></route><about></about>} />
</routes>
</hashrouter>
</div>
</code></pre>

);
}
“`

En la página de inicio se muestra “…/Landing-Page/” como se esperaba, pero en la otra página se muestra “…/about” en lugar de “…/Landing-Page/about”.
Tengo la configuración de gh-pages.

Mi página de Github es https://alexhmar.github.io/Landing-Page/ y mi repositorio es https://github.com/alexhmar/Landing-Page/tree/master.

También he intentado esto con ““, pero es el mismo problema.

Tags:  , , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Parece que el problema está relacionado con la configuración de routing. Según el fragmento de código proporcionado, la propiedad basename está configurada como /Landing-Page, lo cual sirve como ruta base para todas las rutas. Sin embargo, el problema parece estar relacionado con HashRouter y su incapacidad para manejar correctamente rutas anidadas.

    Para solucionar este problema, una posible solución es cambiar a BrowserRouter en lugar de HashRouter. BrowserRouter usa la API de historial de HTML5 y puede manejar rutas anidadas mejor que HashRouter.

    Para usar BrowserRouter, simplemente reemplace HashRouter con BrowserRouter y elimine la propiedad basename:

    function App() {
  return (
    <div classname="Container-fluid" id="div2">
      <browserrouter>
        <header></header>

        <routes>
          <route path="/thankyou" element=""></route><thankyou></thankyou>} />
          <route exact="" path="/" element="{"></route><div classname="Container">
                <signup validate="{validate}"></signup>
                <ebookinfo></ebookinfo>
              </div>
            }
          />
          <route path="/about" element=""></route><about></about>} />
        </routes>
      </browserrouter>
    </div>
  );
}

    Después de realizar estos cambios, intente ejecutar la aplicación nuevamente y vea si el problema persiste. Si todo funciona correctamente, debería poder acceder a la ruta “/about” como “https://alexhmar.github.io/Landing-Page/about”.

Comments are closed.