У меня в приложении React карта Leaflet, и я хотел бы динамически обновлять URL-адрес с информацией о положении (широта, долгота и масштаб) при перемещении карты.
Что-то вроде: app.com/lat,lng,z/myroutes
Кроме того, значения lat, lng, z должны иметь значения по умолчанию, чтобы приложение могло запускаться с app.com и перенаправлять.
В Leaflet есть прослушиватель событий onMoveend, который дает мне информацию, которую я хочу. Вопрос в том, как передать его моему маршрутизатору, чтобы он обновлял URL-адрес и внутренние ссылки приложения.
Я использую реагирующий маршрутизатор v4 для маршрутов.
Я пытался создать пользовательский объект истории со свойством basename, привязанным к состоянию, и затем передать его маршрутизатору. Он работает (с точки зрения обновления 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 {
...
}
}