如何在不重新加载页面的情况下手动设置" this.props.history.location.pathname "的值？

Question

我正在开发小扩展来添加我的基于地图的项目。该扩展名应该像这样在 URL 上显示纬度，很长的位置！每当用户更改位置时。

问题是当用户第二次更改位置时，我无法更改此.props.history.location的路径名

this.map.on("moveend", e => {
if (!this.props.history.location.pathname.substr(4)) {
console.log(this.props.history.location, "no change");
this.props.history.replace(
[
"map",
e.target._zoom,
e.target._lastCenter.lat,
e.target._lastCenter.lng
].join("/")
);
} else {
console.log(this.props.history.location, "change");
}
});

Answer 1

首先，将URL保留在某个常量中：

const URL = http://mlevans.com/leaflet-hash/map.html#12/lat/long

每当位置发生变化时，您都会lat并long然后执行以下操作：

const mapURL = URL.replace(lat, long, this.history.match.params.lat , this.history.match.params.long);
this.history.push(mapURL);

在反应路由器中，您应该将组件映射到http://mlevans.com/leaflet-hash/map.html#12/:lat/:long