title: React and React Router DOM - NavLink and Link aren't triggering API based OAuth flow
body: <p>I'm building a pretty simple app so far that is using Node/Express server with basic API and React front end. </p>
  
  <p>In Node/Express I'm using Passport so users can log in with Google which works 100%. However, only when using an <code>&lt;a&gt;</code> tag.</p>
  
  <p>If I implement with <code>&lt;NavLink&gt;</code> or <code>&lt;Link&gt;</code> the address bar shows the updated URL <code>/auth/google</code>, but it does not trigger the flow.</p>
  
  <p>Is there some gotchas in the react-router-dom lib in this case?</p>
  
  <p><strong>Node/Express:  authRoutes.js</strong></p>
  
  <pre><code>const passport = require("passport");
  
  module.exports = app =&gt; {
    app.get(
      "/auth/google",
      passport.authenticate("google", {
        scope: ["profile", "email"]
      })
    );
  
    app.get(
      "/auth/google/callback",
      passport.authenticate("google"),
      (req, res) =&gt; {
        res.redirect("/surveys");
      }
    );
  
    app.get("/api/logout", (req, res) =&gt; {
      req.logout();
      res.send(req.user);
    });
  
    app.get("/api/current_user", (req, res) =&gt; {
      res.send(req.user);
    });
  };
  </code></pre>
  
  <p><strong>React client: setupProxy.js</strong></p>
  
  <pre><code>const proxy = require("http-proxy-middleware");
  
  module.exports = function(app) {
    app.use(proxy(["/api", "/auth/google"], { target: "http://localhost:5000" }));
  };
  </code></pre>
  
  <p><code>&lt;NavLink&gt;</code> and <code>&lt;Link&gt;</code> do not work for any of these routes that are directly accessed by the user: '/auth/google', '/api/current_user' or '/api/logout.' But when I use an <code>&lt;a&gt;</code> they all work perfectly fine.</p>