Enrutado dinámico en React: BrowserRouter vs HashRouter

En react para configurar las rutas tenemos la libreria react-router-dom. Podemos instalar con:

npm install react-router-dom

Esa librería tiene los componentes BrowserRouter y HashRouter. La principal diferencia entre ellos está en que con HashRouter se añade el # a las rutas url. Tal que así:

– HashRouter: https://gallery-react.disastercode.com.es/#/gallery/animales/gatos
En este caso el servidor ignora lo en la url lo que hay despues del #. Y el cliente es el que se encarga de interpretar esa parte de la ruta.

– BrowserRouter: https://gallery-react.disastercode.com.es/gallery/animales/gatos
En este otro caso el servidor intentará manejar la ruta completa. Por eso al recargar la página nos devolverá 404, al ser rutas que no existen en el lado del servidor.

Ejemplo con HashRouter

Fuente