为什么我的路由器不重定向 - 交互式地图？

Question

我有这张交互式地图，如果您点击某个国家/地区，它会将您重定向到该特定国家/地区的页面，但重定向对我不起作用，我不明白我做错了什么。这是代码：

onClick={() => {
                    const {NAME} = geo.properties;
                    if(NAME == 'Bulgaria')
                      {
                        <Redirect to='pages/services' />
                      }
                  }}

这是我的交互式地图的 .js 文件的完整代码：

import React, { memo } from "react";
import {
  ComposableMap,
  Geographies,
  Geography
} from "react-simple-maps";
import { Redirect } from "react-router-dom";
import { BrowserRouter } from 'react-router-dom';

...
const MapChart = ({ setTooltipContent }) => {
  return (
    <>
      <ComposableMap data-tip="" projectionConfig={{ scale: 200 }}>

          <Geographies geography={geoUrl}>
            {({ geographies }) =>
              geographies.map(geo => (
                <Geography
                  key={geo.rsmKey}
                  geography={geo}
                  onMouseEnter={() => {
                    const { NAME, POP_EST } = geo.properties;
                    setTooltipContent(`${NAME} — ${rounded(POP_EST)}`);
                  }}
                  onMouseLeave={() => {
                    setTooltipContent("");
                  }}
                  onClick={() => {
                    const { NAME } = geo.properties;
                    if (NAME === 'Bulgaria') {
                    this.setState({ redirect: true });
                    }
                  }}
                  ...
                />
              ))
            }
          </Geographies>
      </ComposableMap>
    </>
  );
};

export default memo(MapChart);

Answer 1

问题

这不是 JSX 的工作方式。它不是重定向，因为函数不能 return 渲染 JSX，也不会尝试导航。呈现的所有内容都需要在 render 函数或功能组件 return 中。此处理程序没有 return 任何东西。

解决方案

您可以以声明方式有条件地呈现 Redirect 组件，或强制发出导航操作。

根据条件使用 Redirect 组件。

// later in render/return
if (redirect) {
  return <Redirect to='/pages/services' />;
}

return (
  ...

  onClick={() => {
    const { NAME } = geo.properties;
    if (NAME === 'Bulgaria') {
      setRedirect(true);
    }
  }}

  ...
);

地图图表

const MapChart = ({ setTooltipContent }) => {
  const [redirect, setRedirect] = useState(false); // <-- add redirect state

  return redirect ? ( // <-- conditional render redirect
    <Redirect to="/pages/services" />
  ) : (
    <ComposableMap data-tip="" projectionConfig={{ scale: 200 }}>
      <Geographies geography={geoUrl}>
        {({ geographies }) =>
          geographies.map((geo) => (
            <Geography
              ...
              onClick={() => {
                const { NAME } = geo.properties;
                if (NAME === "Bulgaria") {
                  setRedirect(true); // <-- set redirect state
                }
              }}
              ...
            />
          ))
        }
      </Geographies>
    </ComposableMap>
  );
};

使用 history.replace.

onClick={() => {
  const { NAME } = geo.properties;
  if (NAME === 'Bulgaria') {
    history.replace('/pages/services');
  }
}};

地图图表

const MapChart = ({ history, setTooltipContent }) => { // <-- destructure history route prop
  return (
    <ComposableMap data-tip="" projectionConfig={{ scale: 200 }}>
      <Geographies geography={geoUrl}>
        {({ geographies }) =>
          geographies.map((geo) => (
            <Geography
              ...
              onClick={() => {
                const { NAME } = geo.properties;
                if (NAME === "Bulgaria") {
                  history.replace("/pages/services"); // <-- imperative navigation
                }
              }}
              ...
            />
          ))
        }
      </Geographies>
    </ComposableMap>
  );
};

注意： 如果 MapChart 不是直接由 Route 组件呈现（即它不接收 route props) then you can use the useHistory 反应挂钩.

const history = useHistory();

并且导航与点击处理程序完全相同。