我如何有效地使用 react-router Link？答案

【问题标题】：How can i use react-router Link efficiently?我如何有效地使用 react-router Link？
【发布时间】：2020-12-19 10:19:08
【问题描述】：

当我使用导航栏中的链接进行反应时，即使我在那个家中，我也会一次又一次地转到建议的 URL，我如何有条件地重定向，以便如果我在主页上，然后单击再次home键，我不会再去首页了

<Link className="link" to="/leaderboards">
      <Home/>
</Link>

【问题讨论】：

粘贴更多代码。

标签： reactjs react-router

【解决方案1】：

使用<NavLink />组件重定向到其他路由，并将活动类名设置为禁用类。

应用程序

  <NavLink to="/" className="link" activeClassName="disabled-link">Home</NavLink>

CSS

.disabled-link {
  pointer-events: none;
}

【讨论】：

【解决方案2】：

这不是您使用Link 的方式。您只需在 Link 组件中指定路径名，并在 Router 中管理路径组件。

现在您只需要始终渲染一个 <Home /> 组件，因此会出现问题。

【讨论】：

【解决方案3】：

这里是开放的 Github 问题（在撰写本文时）：https://github.com/ReactTraining/react-router/issues/5362

重申here 的解决方案，您可以创建一个钩子来防止连续推送相似的位置：

import { useHistory } from "react-router-dom";

export default function useLocationBlocker() {
  const history = useHistory();
  useEffect(
    () => {
      history.block(
        (location, action) =>
          action !== "PUSH" ||
          getLocationId(location) !== getLocationId(history.location)
      );
    },
    [] // eslint-disable-line react-hooks/exhaustive-deps
  );
}

function getLocationId({ pathname, search, hash }) {
  return pathname + (search ? "?" + search : "") + (hash ? "#" + hash : "");
}

要重现，请多次单击主页链接，并注意您可以按相同的次数按返回按钮。 (https://codesandbox.io/s/r0wXp0Njw?file=/index.js)

【讨论】：