javascriptreactjsreact-routerreact-router-domhistory.js

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


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 /#


Solution

  • 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.