viernes 7 febrero 2025

Diferencia entre BrowserRouter y HashRouter en React

En React, BrowserRouter y HashRouter son dos tipos de enrutadores proporcionados por React Router para gestionar la navegación en aplicaciones de una sola página (SPA). La principal diferencia radica en cómo manejan las rutas en la URL.

BrowserRouter vs. HashRouter

Característica	BrowserRouter	HashRouter
Formato de URL	Rutas limpias (`/home`)	Usa `#` en la URL (`#/home`)
Modo de historial	HTML5 History API (`pushState`)	Cambia el fragmento de la URL (`window.location.hash`)
Requiere configuración en el servidor	Sí, para manejar rutas en recarga	No, ya que todo se maneja en el cliente
Compatibilidad	Funciona mejor en servidores con soporte para `history`	Compatible con cualquier servidor estático
Uso recomendado	Aplicaciones con control sobre el backend	Aplicaciones estáticas sin configuración de servidor

¿Cuándo usar cada uno?

Usa BrowserRouter si tu aplicación está alojada en un servidor que puede manejar rutas correctamente. Es la opción recomendada para aplicaciones modernas.
Usa HashRouter si estás alojando la app en un servidor estático (como GitHub Pages), donde no puedes configurar redirecciones para rutas no encontradas.

Ejemplo de uso

`BrowserRouter`

import { BrowserRouter, Route, Routes } from "react-router-dom";
import Home from "./Home";
import About from "./About";

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </BrowserRouter>
  );
}

`HashRouter`

import { HashRouter, Route, Routes } from "react-router-dom";
import Home from "./Home";
import About from "./About";

function App() {
  return (
    <HashRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </HashRouter>
  );
}

Referencia

Sitio oficial de React Router: https://reactrouter.com/

Etiquetas:

react desarrollo web

Creado por:

Jorge García

Fullstack developer