My app uses a react-leaflet
for generating a Map with Markers and Popups. And I need to give a link to the other page from Popup by <Link/>
component from react-router
.
/* app.js */
import React from 'react';
import { render } from 'react-dom';
import { Router, Route, browserHistory } from 'react-router';
import App from './components/App';
import Map from './components/Map';
const Root = () =>
<Router history={browserHistory}>
<Route path='/' component={App}>
<Route path='map' component={Map} />
</Route>
<Router>
render(<Root />, document.getElementById('root'));
/* components/Map/index.js */
import React from 'react';
import { Router, Route, browserHistory } from 'react-router';
import App from './components/App';
import Map from './components/Map';
const Map = () =>
<Map>
<Marker position={[10, 10]}>
<Popup>
<div>
<Link to="/">Main page</Link>
</div>
</Popup>
</Marker>
<Map>
export default Map;
But passing through the link I get an error:
<Link>s rendered outside of a router context cannot navigate.
It is because the content of opened Popup is removed from router context and is placed below.
I suppose, that I can to put router.push()
into Popup. But maybe is it possible to use a <Link/>
?
Thanks!
So, I created
ContextProvider
component-creator:And used it in the creation of maps marker: