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

Question

when I use the Link in the navbar in react it takes me to the suggested URL again and again even if I am present at that home,how can I redirect conditionally such that if I am on the home page then after clicking the home button again, I will not go to the home page again

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

Answer 1

Use <NavLink /> component to redirect to other routes and set the active className as disabled class.

App

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

CSS

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

Answer 2

That's not how you use a Link . You just specify a pathname in a Link component, and manage your paths-components inside a Router .

Now you just render a <Home /> component always, hence the issue.

Answer 3

The open Github issue (at time of writing) for this is here: https://github.com/ReactTraining/react-router/issues/5362

To reiterate the solution here , you can create a hook for to prevent similar locations from being pushed consecutively:

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 : "");
}

To reproduce, click the Home link more than once and notice that you can press the back button the same number of times. ( https://codesandbox.io/s/r0wXp0Njw?file=/index.js )