title: Override `to` behavior by `onClick` action in NavLink(React router)
body: <p>I have list of menu tabs that have predefined path and I am using react router to build navigation. So far it worked great, until I received a task to perform sort of validation on user input and depending on that let them switch the tabs. My goal is to override predefined path of <code>to</code> in <code>NavLink</code> and refer to <code>useHistory</code>, which I want to trigger <code>onClick</code>.</p>
  <p>I can't tell which path would be next, because it depends on user choice and, thus, can't hardcode anything in <code>to</code> prop of <code>NavLink</code>. Ideally I would want something like this, but it's not working:</p>
  <pre><code>const validateAndRedirect = (tab) =&gt; {
      //call methods to validate user input
      const validate = someDummyValidation(tab);
      if(validate){
          //proceed further
          history.push(&quot;/nice/route&quot;);
      } else {
          //don't change the route
          history.push(`${tab.base}/${tab.path}`)
      }
  }
  
  
  {tabs.map((x) =&gt; (
      &lt;NavLink
          key={x.name}
          to={`${x.base}/${props.path}/`}
          onClick={() =&gt; validateAndRedirect(x)}
      &gt;
          {x.name}
      &lt;/NavLink&gt;
    ))}
  </code></pre>
  <p>This solution is what I would ideally prefer, but it's not working. Indeed, I would prefer to keep <code>NavLink</code>, because router does a great job in multiple things that I don't want to re-invent. Another option I had was to use a regular button instead of <code>NavLink</code> and give it <code>onClick</code> action that would deal with redirection, but I still want to hang out with router. Any suggestion will be highly appreciated.</p>