Source: components/userComponents/maps/MonitoredAreaMarkerPopUp.js

import React from "react";
import {BrowserRouter as Router, Link} from "react-router-dom";
import ButtonGroup from "react-bootstrap/es/ButtonGroup";
import { withNamespaces } from 'react-i18next';

/**
 * Detail on click on map monitored area marker
 * @extends Component
 * @hideconstructor
 */
class MonitoredAreaMarkerPopUp extends React.Component {

  /**
   * @constructs
   * @param props
   */
    constructor(props) {
        super(props);
    }

  /**
   *
   * @returns {*}
   */
  render() {
      const { t } = this.props;
        return (
            <div>
                <Router>
                    <div className="box-body">
                        <div className="text-primary">{this.props.name}</div>
                        <div className="text-sm">{this.props.id}</div>
                        <ButtonGroup>
                            <Link to={'/config/detail/' + this.props.id} class="btn-sm btn-primary">{t("monitoredArea.detail")}</Link>
                            <Link to={'/config/edit/' + this.props.id} class="btn-sm btn-primary">{t("monitoredArea.edit")}</Link>
                            <Link to={'/config/parameters/' + this.props.id} className="btn-sm btn-primary">{t("monitoredArea.params")}</Link>
                            <Link to={'/config/annotation/' + this.props.id} className="btn-sm btn-primary">{t("monitoredArea.annotate")}</Link>
                        </ButtonGroup>
                    </div>
                </Router>
            </div>
        );
    }
}

export default withNamespaces()(MonitoredAreaMarkerPopUp);