react-router-dom Link not working in react leaflet custom popup - reactjs

Question

Actually, I am using react-leaflet with custom popup, when i tried to use react-router-dom Link component in it than i got error
"leaflet": "^1.4.0",
"leaflet.markercluster": "^1.3.1",
"react": "^16.5.2",
"react-dom": "^16.8.4",
"react-router-dom": "4.3.1",
"react-router-redux": "5.0.0-alpha.9",
React Router Link doesn't work with LeafletJS
I tried above mentioned link but still got error.
*
* CustomPopup
*
*/
import React from 'react';
import Moment from 'moment';
import {extendMoment} from "moment-range";
import {Link, withRouter} from "react-router-dom";
import currencyFormatter from "../../utils/currencyFormatter";
const moment = extendMoment(Moment);
const CustomPopup = (props) => {
const { item } = props;
return (
<div className='map-properties'>
<div className='map-img'>
<img
style={{width: "301px", height: "203px"}}
src={item.image ? `${item.image}`: "http://placehold.it/301x203"}
className="custom-img"
onError={(e)=>{e.target.onerror = null; e.target.src="http://placehold.it/301x203"}}
/>
</div>
<div className='map-content'>
<h4><a href='properties-details.html'> {item.title} </a></h4>
{item.address && <p className='address'> <i className='fa fa-map-marker'></i> {item.address} </p>}
<p className='description'> description </p>
<div className='map-properties-fetures'>
<span><i className='flaticon-square-layouting-with-black-square-in-east-area'></i>{item.area} sqft<sup>2</sup></span>
<span className="right"><i className='flaticon-bed'></i>{item.bedrooms}</span>
<span><i className='flaticon-holidays'></i>{item.bathrooms}</span>
<span className="right">
<i className="fa fa-calendar"></i> {moment.range(moment(item.created_at), moment()).diff('days')} Days ago
</span>
</div>
<div className='map-properties-btns'>
<a className='border-button-sm border-button-theme' style={{marginRight: "5px"}}>
{currencyFormatter(item.price)}
</a>
##below the React Router Dom component <Link/>##
<Link href='properties-details' className='button-sm button- theme'>Details</Link>
</div>
</div>
</div>
);
};
export default CustomPopup;
/**
*
*End of CustomPopup
*
*/
/**
*
* LeafLet Map Container where i use above custom popup
*
*/
import "./index.css";
import React, {Fragment, PropTypes } from 'react';
import CustomPopup from "../../components/CustomPopup";
import {createClusterCustomIcon, ThemePointer} from "../../components/CustomMarker";
import 'react-leaflet-markercluster/dist/styles.min.css';
import MarkerClusterGroup from 'react-leaflet-markercluster';
import {TileLayer, Marker, Popup, Map, LayersControl,} from 'react-leaflet';
import {withRouter} from "react-router-dom";
import ContextProvider from "../../components/ContextProvider";
export const Context = React.createContext({});
const MyPopupMarker = (props) => {
const { item } = props;
let lat = item.latitude ? item.latitude : 0.0000;
let lng = item.longitude ? item.longitude : 0.0000;
return (
<Marker position={[lat, lng]} icon={ThemePointer}>
<Popup>
<CustomPopup key={item.id} item={item} />
</Popup>
</Marker>
);
};
const MyMarkersList = (props) => {
const { markers } = props;
const items = markers && markers.length > 0 ? markers.map((item, index) => (
<MyPopupMarker key={item.id} item={item} context={props.context}/>
)): "";
return <Fragment>{items ? items : ""}</Fragment>;
};
const { BaseLayer,} = LayersControl;
class LeafLetMap extends React.PureComponent{
updateDimensions() {
const height = window.innerWidth >= 992 ? window.innerHeight : 400
this.setState({ height: height - 348 })
}
componentWillMount() {
this.updateDimensions()
}
componentDidMount() {
window.addEventListener("resize", this.updateDimensions.bind(this))
console.log(this.props.context)
}
componentWillUnmount() {
this._isMounted = false;
window.removeEventListener("resize", this.updateDimensions.bind(this))
}
render(){
const {filterPropertiesList, featuredPropertyList} = this.props;
let markers;
if(!filterPropertiesList.isSearched && featuredPropertyList.data.length > 0){
markers = featuredPropertyList.data;
}else if(filterPropertiesList.isSearched && filterPropertiesList.data.properties.length > 0){
markers = filterPropertiesList.data.properties;
}
return (
<Map style={{ height: this.state.height }} center={[25.0657, 55.17128]} zoom={16}>
<LayersControl position="bottomleft">
<BaseLayer checked name="Default">
<TileLayer
attribution='&copy OpenStreetMap contributors'
url="http://{s}.google.com/vt/lyrs=p&x={x}&y={y}&z={z}"
subdomains={['mt0','mt1','mt2','mt3']}
/>
</BaseLayer>
<BaseLayer name="Satellite">
<TileLayer
attribution='&copy OpenStreetMap contributors'
url="http://{s}.google.com/vt/lyrs=s&x={x}&y={y}&z={z}"
subdomains={['mt0','mt1','mt2','mt3']}
/>
</BaseLayer>
</LayersControl>
<MarkerClusterGroup iconCreateFunction={createClusterCustomIcon}>
<MyMarkersList markers={markers} />
</MarkerClusterGroup>
</Map>
);
}
}
export default LeafLetMap;
Warning: Failed prop type: The prop to is marked as required in Link, but its value is undefined.
Warning: Failed context type: The context router is marked as
required in Link, but its value is undefined.
I mentioned libraries versions, post container and custom popup where i used react router dom link component.
I also paste occurred warnings as a results.