react-router: How to disable a <Link>, if its active?

Question

How can I disable a in react-router, if its URL already active? E.g. if my URL wouldn\'t change on a click on I want to p

Answer 1

All the goodness of React Router NavLink with the disable ability.

import React from "react"; // v16.3.2
import { withRouter, NavLink } from "react-router-dom"; // v4.2.2

export const Link = withRouter(function Link(props) {
  const { children, history, to, staticContext, ...rest } = props;
  return <>
    {history.location.pathname === to ?
      {children}
      :
      {children}
    }
  
});