react-router: [Bug]: Usage causing an unexpected refresh
What version of React Router are you using?
5.2.1 (also tried 5.3.1)
Steps to Reproduce
I have this function that clears some cookies then navigates using history.push()
const go_to_beta = function () {
myStorage.setItem('draft_dm_text', '');
myStorage.setItem('dm_link_saved', null);
myStorage.setItem('draft_dm_title', '');
myStorage.setItem('dm_only_text_saved', '');
myStorage.setItem('savedEditorContents', '');
myStorage.setItem('saved_selected_image_data', '');
myStorage.setItem('draft_dm_image', '');
history.push("/dashboard/posts/new");
}
This causes a refresh at the same time the view is changed to /dashboard/posts/new
<Link onClick={go_to_beta} className="btn btn-success btn-sm"><i className="fas fa-plus-square"></i> New</Link>
So does this (avoiding calling the function at all)
<Link to="/dashboard/posts/new" className="btn btn-success btn-sm"><i className="fas fa-plus-square"></i> New</Link>
I think it’s tied to my usage of <Link> because this works as intended.
<Button onClick={go_to_beta} className="btn btn-success btn-sm"><i className="fas fa-plus-square"></i> New</Button>
I’ve tried as specified above 5.2.1, 5.3.0 and 5.3.1
What could be causing this? We just noticed it started a few days ago and are anxious to fix it but I’m not sure what to do.
Expected Behavior
Shouldn’t refresh the page
Actual Behavior
Any usage of <Link> refreshes the page, even without a to property or onClick property attached.
About this issue
- Original URL
- State: closed
- Created 2 years ago
- Reactions: 6
- Comments: 24 (1 by maintainers)
Okay I’ve found the root cause for my issue at least - google tag manager. Commenting out the script from my application has fixed navigation for me.
Yeah I was experiencing it on all platforms including Phones
This is/was happening on Chrome+macOS for us as well.
@bobber205 I don’t know if this was the quickest way to get a response, but I posted about this issue in the Tag Manager Help community. Please feel free to upvote/reply