Question

我使用Jvectormap制作了地图。单击某个国家/地区后，我正在使用react-router-dom重定向到该国家/地区的页面。我要解决的问题是，重定向后，该国家的标签仍留在屏幕上。

这是我的地图：[1]：https://i.stack.imgur.com/VV6zZ.png

这是我经过的路线：https://i.stack.imgur.com/yUqKl.png

您可以看到标签仍留在页面上，甚至认为我已更改路线。

我尝试使用以下方法完全擦除标签：

onRegionTipShow={function(e, el, code) {e.preventDefault();}}

但这不是我想要的，因为它完全擦除了标签。

以下是“地图”组件：

import React from "react";
import { VectorMap } from "react-jvectormap";

const countries = require("country-list");

export default class Map extends React.Component {
  state = {
    isLoading: true, // gestion du chargement
    mapData: {}
  };

  async componentDidMount() {
    this.setState({
      isLoading: false, 
      mapData: {
        FR: 1,
        US: 0,
        BE: 0,
        KH: 0,
        CO: 0,
        EC: 0,
        IT: 0,
        LA: 0,
        LU: 0,
        MC: 0,
        MM: 0,
        PT: 0,
        RU: 0,
        ES: 0,
        CH: 0,
        TH: 0,
        TN: 0,
        VN: 0,
        NO: 0,
        GB: 0,
        MA: 0,
        DE: 0,
        NL: 0,
        AT: 0
      }
    });
  }
  // Gestion des événenemts :
  handleClick = (event, code) => {
    this.props.changeState(code);
  };

  render() {
    if (this.state.isLoading) {
      console.log("loading");
      return null;
    }
    return (
      <div>
        <div className="map-container">
          <VectorMap
            onRegionClick={this.handleClick}
            map={"world_mill"}
            backgroundColor="pink"
            ref="map"
            containerStyle={{
              height: "100%"
            }}
            containerClassName="map"
            regionStyle={{
              initial: {
                fill: "#e4e4e4",
                "fill-opacity": 0.9,
                stroke: "none",
                "stroke-width": 0,
                "stroke-opacity": 0
              },
              hover: {
                "fill-opacity": 0.8,
                cursor: "pointer"
              },

              selectedHover: {}
            }}

            series={{
              regions: [
                {
                  values: this.state.mapData, //this is your data
                  scale: ["#417DD7", "#EF6B93"] //your color game's here
                }
              ]
            }}
          />
        </div>
      </div>
    );
  }
}

以下是带有路由的App组件：

import React from "react";
import "./App.css";
import Map from "./components/Map";
import Header from "./components/shared/Header";
import Footer from "./components/shared/Footer";

//countries
import France from "./components/countries/France";

import { BrowserRouter as Router, Route, Redirect } from "react-router-dom";

export default class App extends React.Component {

  state = {
    isLoading: true, // gestion du chargement
    page: "Map"
  };

  async componentDidMount() {
    this.setState({
      isLoading: false // le chargement a été fait
    });
  }

  // Gestion des événenemts :
  changeState = direction => {
    this.setState({ page: direction });
  };

  render() {
    if (this.state.isLoading) {
      console.log("loading");
      return null;
    }

    return (
      <Router>
        <Route
          exact
          path="/"
          render={() => {
            if (this.state.page === "FR") {
              return <Redirect to="/france" />;
            }
            return (
              <div>
                <Map changeState={this.changeState} page= {this.state.page} />

              </div>
            );
          }}
        />
        <Route path="/france" component={France} />
      </Router>
    );
  }
}```

Jvectormap：标签在路由后不会消失

0 个答案: