History: Blocked hash history changes from a href are still changed in URL bar

[grassick]

I block a navigation using block and it correctly does not call the location change listener.

However, the URL in the URL bar is in fact changed which is really confusing to the user and might lead to bookmarking the wrong page. I'm using hash history.

[mjackson]

We've got tests for this:

• block a PUSH
• block a POP

both of which are passing. Can you please provide a case that fails?

[grassick]

My case is in Chrome when I click on a <a href="#/somelinkhere">link</a>. I'm not doing a push, but am clicking directly on an href link. The transition is correctly blocked in every respect except for the URL bar of the browser where it still changes.

[ryanflorence]

does it go back to the correct URL after you cancel the prompt?

On Thu, Sep 15, 2016 at 9:04 AM grassick [email protected] wrote:

My case is in Chrome when I click on a link.
I'm not doing a push, but am clicking directly on an href link. The
transition is correctly blocked in every respect except for the URL bar of
the browser where it still changes.

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
https://github.com/mjackson/history/issues/367#issuecomment-247372145,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AAGHaG0o11egjdG8xHC25rUNyOb7Ack1ks5qqWxTgaJpZM4J84lZ
.

[grassick]

Nope! It stays at the one that was blocked.

[dlvx]

Same issue here, happens when using getUserConfirmation as well, seems in this case the revertPop(location) is not working but I could be wrong

[socketwiz]

I'm seeing the same issue as well when trying to use with react-router and using Link to navigate.

        let history = useRouterHistory(() => createHashHistory({
            getUserConfirmation(message, callback) {
                return callback(confirm(message));
            }
        }))();
        const unblock = history.block('Are you sure you want to leave this page?');

It does present the confirmation message, but its already navigated to the destination before this occurs. Pressing OK or Cancel just seems to dismiss the confirmation dialog. It does not navigate back to where you came from, which doesn't really matter because its way to late by this point, it should never have navigated at all.

I'm using hashHistory not browserHistory if that makes a difference.

[mjackson]

Would really appreciate some help here if anyone has the time to pitch in. Sounds like there's a legitimate issue. A failing test case here would be invaluable.

[socketwiz]

Actually I figured mine out. I found this example: https://github.com/ReactTraining/react-router/blob/master/docs/guides/ConfirmingNavigation.md. I was trying to use history.block when I should have been using router.setRouteLeaveHook;

[mjackson]

Thanks, @socketwiz. @grassick, still seeing this issue?

[mjackson]

Closing due to inactivity.

[grassick]

@mjackson Sorry for the delay on getting back on this one. It is absolutely still happening for me.

I use history.block(<some function which returns a string to block>)

I'm using require('history/createHashHistory').default as the history.

[mjackson]

No worries, @grassick. If you could please provide a failing test case that would be great.

[TheTFo]

I had the same issue. I was creating my own history object to use, but allowing HashRouter to create another instance internally. I switched to using just Router, passing in the history prop, and specifying a getUserConfirmation directly, as there is no default:

const historyObject = createHistory({
    getUserConfirmation: (message, callback) => {
        callback(window.confirm(message));
    }
});

export default class AppRouter extends React.Component {
    render() {
        return (
            <Router history={historyObject}>
                <Routes {...appRoute} />
            </Router>
        );
    }
}

[Fabianopb]

Hi @mjackson, did we have any updates on this issue or related stories? I'm asking because I'm having the same problem with browserHistory. There's an open issue in react-router (https://github.com/ReactTraining/react-router/issues/5405 -> some people there have created repos to reproduce and gifs) that's basically about the same thing, so I'm not sure if the problem is here or there...

[JaSpr]

This is still happening for me. We're using a block to close an open modal when the user hits back. Visually everything works fine, except the address bar, which was updated with the new url .