Question

我在React应用程序上有一个Leaflet地图，我想在移动地图时动态更新带有位置信息（纬度，经度和缩放）的URL。

类似于：app.com/lat,lng,z/myroutes

此外，lat，lng，z应该具有默认值，以便该应用程序可以从app.com启动并重定向。

Leaflet有一个名为onMoveend的事件侦听器，它为我提供了我想要的信息。问题是如何将其传递到我的路由器，以便它更新URL和应用程序内部链接。

我在路由中使用react-router v4。

我尝试创建一个自定义历史对象，该对象的基名称属性附加到该状态，然后将其传递给路由器。它可以正常工作（就更新URL而言（在本例中为基本名称）），但是应用程序上的导航崩溃并且控制台显示“您不能更改路由器历史记录”。

这是更新URL的组件（this.props.map来自Redux存储）：

componentDidUpdate(prevProps) {
  if (this.props.map !== prevProps.map) {
    const { lat, lng, z } = this.props.map
    this.setState({ lat, lng, z })
  }
}

render() {
  const { lat, lng, z } = this.state

  if (lat && lng && z) {

    const history = createBrowserHistory({
      basename: `@${lat},${lng},${z}`
    })

    return (
      <Router history={history}>
        <Main>
          <Switch>
            <Route exact path='/farms' component={FarmsList} />
            <Route exact path='/farms/new' component={NewFarm} />
            <Redirect from='*' to='/farms' />
          </Switch>
        </Main>
      </Router>
    )
  } else {
    ...
  }
}

Answer 1

只需将新的url推送到历史记录堆栈中，

window.history.pushState({/*empty state object*/}, "example name", "/`@${lat},${lng},${z}`");

在不导致浏览器加载新页面的情况下更改网址

签出documentation

Answer 2

我为自己建立的网站做了这件事。没有使用react-router，而是使用了我自己的网址解析器来更新URL，并在页面加载时通知redux网址参数。

https://github.com/jbccollins/metro-monitor/blob/master/client/src/containers/app/index.js#L55

在这里使用onMoveEnd进行调用 https://github.com/jbccollins/metro-monitor/blob/master/client/src/containers/MetroMap/index.js#L269

请注意，我添加了一项检查以确保您不保存使用移动捏缩放可能发生的小数缩放级别。那真的会让传单弄乱，并使我的应用程序崩溃。

希望有帮助

如何使用地图坐标更新URL？

2 个答案: