Why on react history createHashHistory appends /# for each path?

Question

I have an application with this config for history:

import { createHashHistory } from 'history';
import { ConnectedRouter } from 'connected-react-router';

const history = createHashHistory({
  hashType: 'slash',
});
    ...
  <ConnectedRouter history={history}>
    <App />
  </ConnectedRouter>

But all my routes get appended by /# ex: localhost:8080/ becomes: localhost:8080/#/

I already tried to update my packages as this question say but it didn't work.

The only thing that worked was change createHashHistory to createBrowserHistory, but I'm not sure what's the difference between them, and why createHashHistory is appending the /#

Hash routing in general is UI routing that contains a `/#/`. It utilizes the `hashchange` and `window.location.hash` API to simulate routing. Alternately, UI routing uses the `history` API to update the URL and store previous states in browser memory. — Austin Ezell, May 28 '20 at 20:54

score 4 · Accepted Answer · answered May 28 '20 at 21:48

4

With hashHistory, it produces url like http://yourwebsite.net/#page/xxx

With browserHistory, it produces url like http://yourwebsite.net/page/xxx

Which one to use? In real-world products, browserHistory is mostly used. A rule of thumb is "if you are using a dynamic server that can handle dynamic URLs then you need to use the BrowserRouter component but if you are using a server that only serves static files then a HashRouter component is what to be used in this case."

In your code, hashType: 'slash' is just the default value.

answered May 28 '20 at 21:48

vcycyv

606
7
9

Thank you, just one thing:`hashType: 'slash'` is the default value for what? – Lucas Andrade May 29 '20 at 02:27
I mean, you can simply use createHashHistory(), instead of createHashHistory({ hashType: 'slash', }); – vcycyv May 29 '20 at 05:44

Why on react history createHashHistory appends /# for each path?

1 Answers1