"X" mark in popup is breaking applications by pointing to "#close"

[hadson172]

• I've looked at the documentation to make sure the behavior is documented and expected
• I'm sure this is a Leaflet code issue, not an issue with my own code nor with the framework I'm using (Cordova, Ionic, Angular, React…)
• I've searched through the issues to make sure it's not yet reported

Steps to reproduce
Steps to reproduce the behavior:

• Add popup to map (Screenshot from https://leafletjs.com/)
  

The "X" mark is a link, when click will redirect app to diffrent url (like this)
https://leafletjs.com/#close

The button is rendered as <a class="leaflet-popup-close-button" role="button" aria-label="Close popup" href="#close"><span aria-hidden="true">×</span></a>

Expected behavior
Leaflet close popup button should not mess with routing inside application and create links pointing to sections.

Current behavior
In case of leaflet with frameworks like react and react-router this feature is breaking routing, enforcing to trigger hooks watching url changes and forcing to re-render whole map and page.

Environment

• Leaflet version: 1.8.0
• Browser (with version): Firefox
• OS/Platform (with version): Windows

Additional context

Minimal example reproducing the issue

https://leafletjs.com/

• this example is as simple as possible
• this example does not rely on any third party code

[IvanSanchez]

Duplicate of #8159