createHashHistory stops working on version 5, adds extra hashtag #

[jakub-astrahit]

I use the connected-react-router on my Typescript project and when I upgraded my router to version 5, the createHashHistory stopped working - by that I mean when I run my app (npm start) and do a refresh of my app in the browser, I get duplicate hashtags in the URL

So for example on the homepage instead of staying at http://localhost:3002/#/ I get http://localhost:3002/#/#/ after refresh (after hitting F5 or hot reload). When I reload again, I'll get http://localhost:3002/#/#/#/ and so on. Navigation to other parts of the app works normally and doesn't add the extra hashtag. It's only after a hard refresh (F5).

This is how I set up my createHashHistory:

import { createHashHistory } from 'history'
const history = createHashHistory({
  hashType: 'slash',
  getUserConfirmation: (message, callback) => callback(window.confirm(message))
})
const store = configureStore()
ReactDOM.render(
  <Provider store={store}>
    <BootstrapProvider theme={myTheme} reset={true} injectGlobal={true}>
      <ConnectedRouter history={history}>
            <App />
      </ConnectedRouter>
    </BootstrapProvider>
  </Provider>,
  document.getElementById("root") as HTMLElement,
)

I use the createHashHistory setup exactly the same way as described in the FAQ: https://github.com/supasate/connected-react-router/blob/master/FAQ.md#how-to-set-router-props-eg-basename-initialentries-etc

It worked on version router version 4. Any ideas please what's causing that extra hashtag to appear after every refresh?

[blackarctic]

Any update on this? I am still running into this issue on latest (6.4.0)

[blackarctic]

For the poor soul who comes across this, I have found a "workaround solution" by grabbing the original hash before ConnectedRouter has the chance to modify it and resetting it after ConnectedRouter has modified it:

const resetPathWhenHashRouting = (): void => {
    if (window.location.hash.startsWith('#/')) {
        // Workaround since hash history is broken in connected-react-router > 5.0.0
        // https://github.com/supasate/connected-react-router/issues/282
        const origHash = window.location.hash;
        // reset the hash on the next tick
        setTimeout(
            () => {
                window.location.hash = origHash;
            },
            0,
        );
    }
};

Call this function inside the render function of your root App component or whichever component renders ConnectedRouter

[ghost]

hashType API was removed in v5 of history https://github.com/ReactTraining/history/releases