Soy nuevo en la programación, lo que me dificulta un poco entender las cosas si leo los documentos oficiales.
Estaba leyendo sobre React Router 4 desde aquí
En este artículo, el autor hablaba de <HashRouter> y <BrowserRouter>
Esto es lo que mencionó:
HashRouter básicamente usa el hash en la URL para representar el componente. Como estaba construyendo un sitio web estático de una página, necesitaba usar esto.
BrowserRouter , utiliza la API de historial de HTML5 para representar el componente. El historial se puede modificar a través de pushState y replaceState. Más información se puede encontrar aquí
Ahora, no entiendo el significado y los casos de uso para ambos, como qué quiere decir cuando dice que el historial se puede modificar a través de pushState y replaceState y usa el hash en la URL para representar el componente
Si bien la primera explicación para BrowserRouter es completamente vaga para mí, la segunda explicación sobre HashRouter tampoco tiene sentido, como ¿por qué alguien usaría Hash (#) en la URL para representar el componente?
BrowserRouter Utiliza API de historial , es decir, no está disponible para navegadores heredados (IE 9 e inferior y contemporáneos). La aplicación React del lado del cliente puede mantener rutas limpias como example.com/react/route , pero debe estar respaldada por un servidor web. Por lo general, esto significa que el servidor web debe configurarse para una aplicación de una sola página, es decir, se sirve el mismo index.html para la ruta /react/route o cualquier otra ruta en el lado del servidor. En el lado del cliente, el enrutador React analiza window.location.pathname . React router renderiza un componente que fue configurado para renderizar para /react/route .
Además, la configuración puede implicar la representación del lado del servidor, index.html puede contener componentes o datos representados que son específicos de la ruta actual.
HashRouterUtiliza hash de URL, no impone limitaciones en los navegadores compatibles o el servidor web. El enrutamiento del lado del servidor es independiente del enrutamiento del lado del cliente.
La aplicación de una sola página compatible con versiones anteriores puede usarla como example.com/#/react/route . La configuración no se puede respaldar mediante la representación del lado del servidor porque es / la ruta que se sirve en el lado del servidor, el hash de URL de #/react/route no se puede leer desde el lado del servidor. En el lado del cliente, el enrutador React analiza window.location.hash . React router renderiza un componente que fue configurado para renderizar para /react/route , de manera similar a BrowserRouter .
Lo que es más importante, los casos de uso de HashRouter no se limitan a SPA. Un sitio web puede tener un enrutamiento del lado del servidor heredado o compatible con los motores de búsqueda, mientras que la aplicación React puede ser un widget que mantiene su estado en la URL como example.com/server/side/route#/react/route . Algunas páginas que contienen la aplicación React se sirven en el lado del servidor para /server/side/route , luego, en el lado del cliente, el enrutador React representa un componente que se configuró para representar /react/route , de manera similar al escenario anterior.
LADO DEL SERVIDOR: HashRouter usa un símbolo hash en la URL, lo que tiene el efecto de que todo el contenido de la ruta URL posterior se ignore en la solicitud del servidor (es decir, envía "www.mywebsite.com/#/person/john" el servidor obtiene "www .mywebsite.com". Como resultado, el servidor devolverá la respuesta pre # URL, y luego la aplicación de reacción del lado del cliente manejará (o analizará) la ruta post #.
LADO DEL CLIENTE: BrowserRouter no agregará el símbolo # a su URL, sin embargo, creará problemas cuando intente vincular a una página o recargar una página. Si la ruta explícita existe en la aplicación de reacción de su cliente, pero no en su servidor, la recarga y la vinculación (cualquier cosa que llegue directamente al servidor) devolverá errores 404 no encontrados.
Actualizar la página hace que el navegador envíe una solicitud GET al servidor utilizando la ruta actual. El # se usó para evitar que enviáramos esa solicitud GET. Usamos BrowserRouter porque queremos que la solicitud GET se envíe al servidor. Para representar el enrutador en el servidor, necesitamos una ubicación, necesitamos la ruta. Esta ruta se usará en el servidor para decirle al enrutador qué renderizar. El BrowserRouter se usa cuando desea representar rutas isomórficamente.