Componente HashRouter en React

React es una biblioteca que le permite crear aplicaciones modernas y rápidas con una interfaz de usuario elegante. El enrutamiento es una de las características esenciales de cualquier aplicación orientada al usuario.

En React, usamos una biblioteca react-router para permitir a los usuarios navegar por nuestra aplicación implementando las funciones de enrutamiento.

el componente <HashRouter> en React

<HashRouter> es un subtipo del componente <Router> que usa un valor hash (disponible en window.location.hash) para actualizar la interfaz de usuario de la aplicación en función de los cambios en la URL. El componente recibe su nombre porque usa un símbolo hash. Todo lo que sigue a este símbolo será ignorado en la solicitud del servidor.

Debido a que utiliza un valor hash para representar componentes de forma condicional, <HashRouter> admite navegadores antiguos y nuevos. El enrutamiento del lado del cliente con <HashRouter> está desacoplado del enrutamiento del lado del servidor.

Por ejemplo, si la solicitud del servidor es www.sample.com/#/category/home, la solicitud final recibida por el servidor será www.sample.com, y el enrutamiento del lado del servidor mostrará la página para www.sample.com, no la URL completa, incluidas las partes después del símbolo hash.

En su lugar, puede usar el componente <HashRouter> para cambiar la interfaz de usuario en función de la URL después del símbolo hash. Esto se hace en el lado del cliente.

Para obtener más información sobre cuándo usar <HashRouter> frente a <BrowserRouter>, lea este artículo.

Para entender mejor cómo usar el componente <HashRouter> en la práctica, veamos este ejemplo básico:

import "./styles.css";
import { HashRouter, Link } from "react-router-dom";
export default function App() {
  return (
    <HashRouter basename="/">
      <div className="App">
        <h1>Hello CodeSandbox</h1>
        <h2>Start editing to see some magic happen!</h2>
        <Link to="/category1">hello</Link>
      </div>
    </HashRouter>
  );
}

Importamos dos componentes personalizados de la biblioteca react-router-dom: <HashRouter> y <Link>. Envolvimos toda la aplicación con el componente personalizado <HashRouter>.

Agregamos un componente <Link> en el contenedor que lleva al usuario a la ruta "/category1" desde la URL actual.

Mira esta demostración en vivo para ver cómo funciona en la práctica.

Como puede ver, el componente <HashRouter> tiene un atributo basename establecido igual a simplemente "/". Por este motivo, la página de inicio de esta aplicación es https://bweuok.csb.app/#/.

Al hacer clic en el enlace, accederá a la ruta https://bweuok.csb.app/#/category1.