History: createHashHistory v4 and withRouter all actions are POP

[cushind]

createHashHistory v4, withRouter, history.push(), all actions are POP

Hi,

I've noticed that when using withRouter to get history from props and a hashRouter with createHashHistory, all route changes result in a POP action. This happens even when calling history.push

I need to be able to distinguish between PUSH and POP events.

Steps to reproduce

// customHistory.js
import { createHashHistory } from 'history';

const hashHistory = createHashHistory();

hashHistory.listen((location, action) => {
    console.log(action)
});

export default hashHistory;

import { history } from './customHistory';

<Router history={history}>

import { withRouter } from 'react-router-dom';

class CustomButton extends React.Component {
    handleClick = () => {
        this.props.history.push('/route');
    };
    ...
}

export default withRouter(CustomButton);

What's happening?

Example callstack history.push() -> ... -> handleHashChange -> handlePop. handlePop sets the action to POP.

Current Workaround

Instead of using withRouter I have to import customHistory.js and use the history directly, instead of using from props.

[webxiaobian]

"react-router-dom": "^5.1.2",
I encountered the same problem

[varora1406]

facing same issues with history.push.

History is being pushed, but pop state is being fired and somehow page is not routing to next state of history. (Checked manually with browser forward navigation click)