No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

BrowserRouter vs. HashRouter

5/30
Recursos

Aportes 12

Preguntas 2

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

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鈥檚 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.

HashRouter VS. BrowserRouter VS. MemoryRouter

Aunque los 3 hacen los mismo, tienen un diferente caso de uso.

HashRouter: Se usa especialmente para cuando tengas que hacer tu aplicaci贸n, pero sin usar backend, solo frontend.

Su Modo de uso es: /#/home

BrowserRouter: Este es el m谩s usado, y el m谩s c贸modo si haces una aplicaci贸n completa, tanto frontend y backend.

Su Modo de uso es: /home

MemoryRouter: Este es el m谩s extra帽o porque, tu aplicaci贸n va a empezar a cambiar de ruta pero sin modificar la url y, exacto, 隆es lo mismo como sucede en una aplicaci贸n m贸vil!

Su Modo de uso es: / para todas las rutas

Habla demasiado este tipo....

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.

Tipos de routers

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

BrowserRouter vs. HashRouter

.
React router DOM en su versi贸n 6 tiene 3 tipos de router:
.

  • Browser Router: Funciona de la forma normal /slug. Es decir que utilizamos los slash / y algo m谩s para indicar la ruta que queremos acceder.
    .
  • Hash Router: Funciona de la forma /#/slug. En vez de tener directamente el slash al principio de la diferencia de todas las rutas con las unas con otras, primero tendremos un hashtag # al principio de la url y luego empezamos a poner los slash y el resto de rutas.
    .
  • Memory Router: Funciona en base a la fe. Este router o provider va a tener un array que nos dice en qu茅 ruta estamos. Lo que sea que tenga en memoria o en ese array de routers, esa ser谩 la ruta que rendericemos, no hay una url que nos diga donde estamos. Se puede utilizar para aplicaciones m贸viles, porque evidentemente las aplicaciones m贸viles nativas no tienen una url, se puede navegar y dependiendo de la interacci贸n que tengamos vamos a estar en una ruta u otra. Como no hay una url tiene que ser en memoria.

.
La diferencia crucial entre Browser Router y Hash Router es que los hashes podemos leerlos desde javascript, desde el frontend y pues guiarnos por hash para saber que ruta renderizar en vez de tener la locaci贸n completa o endpoint.
.
Para web es com煤n utilizar el Browser Router o el Hash Router, sin embargo hay una alternativa m谩s a React Router DOM que es React Navigation. Esta es muy popular en aplicaciones m贸viles para React Native.
.
La raz贸n por la que utilizamos Hash Router se debe a que al desplegar una aplicaci贸n en github pages, nosotros no tendr铆amos el control sobre el backend que decide qu茅 renderizar para nuestro frontend.
.
Es decir, cuando entramos a la ruta principal de nuestra aplicaci贸n, por ejemplo user.github.io/curso-react; la ruta principal donde vive nuestra aplicaci贸n es ese index.html que generamos gracias a React que tiene c贸digo javascript, un script y un bundle donde est谩 todo el c贸digo para que funcione nuestra aplicaci贸n.
.
Si a esta ruta le aumentamos navegaci贸n, por ejemplo user.github.io/curso-react/blog; entonces como github pages tiene su propio backend y no encuentra ninguna carpeta de blog, ni un archivo blog.html, pues entonces nos va devolver un 404.
.
B谩sicamente, lo 煤nico que sabe github pages es que existe un archivo index.html, una vez que lo haya encontrado y entramos a esa ruta, vamos a renderizar ese archivo.
.
Si cambiamos la ruta con slashes no va a funcionar, en cambio debemos de utilizar el Slash Navigation el cual nos permite eludir el poco control del backend que se tiene. Por lo cual, le decimos que siempre nos renderice el mismo index.html, sin embargo voy a poner algunos hashes que no van a significar una ruta diferente sino que voy a tener distintas rutas con base en el hash.
.
Entonces si a esta ruta le ponemos un slash user.github.io/curso-react/#/slug, ya no importa que le ponemos despu茅s del slash, eso ya no va a ser una ruta diferente, sino que va a cambiar el hash manteniendo el mismo index.html porque estamos trabajando con una SPA y no tenemos control sobre el backend.
.
En caso de no utilizar github pages, teniendo una SPA en realidad desde el backend no voy a renderizar el contenido. Simplemente voy a tener la API y voy a renderizar siempre al mismo index.html, por lo que mi backend ya est谩 configurado para que todas mis rutas excepto las del API siempre rendericen el mismo html y por lo tanto con el c贸digo javascript va a poder leer la ruta sin que nos salga el 404.

<https://whip-soil-3b5.notion.site/BrowserRouter-vs-HashRouter-5ceba74110fd4a8886724263d561c63e?pvs=4>