BrowserRouter vs. HashRouter

BrowserRouter vs. HashRouter

React Router Dom 6 tiene 3 tipos de Routers:

• Browser Router: Su navegación funciona por medio de los Slash / que indican en que página de la aplicación estamos. Este lo usamos si tenemos una ubicación de otro HTML cargado en el backend, si no lo encuentra retorna un Error 404.
• Hast Router: Su navegación funciona por medio de los Slash Hashes y Slash /#/, esto nos puede servir para renderizar contenido guiándonos con los hash gracias a JavaScript. Este no nos saca del index.html, esto nos sirve para crear páginas SPA.
• Memory Router: Funciona por medio de un Array de rutas que nos indica en que ruta estamos y renderizar ese contenido. Se suele usar para aplicaciones móviles para cambiar de vistas.

HashRouter: Si usamos solo frontend
BrowserRouter: Si usamos frontend y backend

BrowserRouter utiliza la history API de HTML5 para renderizar los componentes. Esto permite mantener las rutas limpias (sin símbolos) pero necesita funcionar en conjunto con el servidor, lo cual en algunos casos puede hacer más complejo el desarrollo.

HashRouter en cambio utiliza el hash (#) en la URL para renderizar los componentes, lo cual evita que el navegador envíe una petición al servidor solicitando la ruta actual cuando se quiere hacer refresh o compartir un link.

Post completo

Browser Router: si utilizamos esta técnica de navegación, tendremos URLS mas limpias y un pequeño impacto en el SEO por url amigables, para trabajar esto en producción en un servidor real que no corra con node.js, toca hacer una configuración adicional para indicarle que independientemente la ruta que este navegando, el servidor renderice el index.html; lo que previene el tipico 404 NOT FOUND y a su vez el router gestiona la ruta como es debido mostrando el page configurado.este tipo de configuraciones se hacen vuelvo y reitero en servidores que no corran con node, dejare unos ejemplo de configuracion para 2 tipos de servidores mas tipicos: (deben de estar ubicados en la carpeta publica del servidor)

1. Apache ( se configura en el archivo .htaccess)

<code>
 RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-l
RewriteRule .index.html [L]
</code>

1. IIS ( se configura en el archivo .web.config ) (toca instalar el plugin de rewrite)

<code> 
<?xml version="1.0" encoding="UTF-8"?>
<configuration>
  <system.webServer>
    <rewrite>
      <rules>
        <rule name="Static Assets" stopProcessing="true">
          <match url="([\S]+[.](html|htm|svg|js|css|png|gif|jpg|jpeg))" />
          <action type="Rewrite" url="/{R:1}"/>
        </rule>
        <rule name="ReactRouter Routes" stopProcessing="true">
          <match url=".*" />
          <conditions logicalGrouping="MatchAll">
            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
            <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
          </conditions>
          <action type="Rewrite" url="/index.html" />
        </rule>
      </rules>
    </rewrite>
  </system.webServer>
</configuration>
</code> 

Siento que el profe se va a dislocar el hombro cada que hace el símbolo del slash / 😂

• BrowserRouter:
  • Utiliza solo los slash (/) para renderizar la ruta.
  • /slug
  • Se utiliza cuando podemos usar varios HTML’s en nuestro proyecto.
• HashRouter
  • No solo utiliza el slash, sino que antes tiene un hashe entre dos slashes, eso antes de la ruta (/#/).
  • /#/slug
  • Se utiliza normalmente en los SPA.
• MemoryRouter
  • Funciona por medio de un Array de rutas, normalmente no se usan en web.

Tipos de routers

Browser Route: /slug (cuando no tenemos control del back)
Hash Router: /#/slug (el hack)
Memory Router: ¿tener fe?

Para entenderle mejor a la teoría de esta clase, les recomienda esta clase de jonmircha React Router en youtube, esta un poquito larga pero el concepto queda bastante claro.