How can I force a browser navigation based GET from a React Route?

Question

I have a login page in my React App that provides the user with the choice of a local login or login via social network OAuth2 services utilising passport.js on a Koa based API server.

Initially, I was attempting to call the backend via ajax, but it seems OAuth2 servers will not allow me to do this, giving me a CORS error, even with a Proxy, so I have instead attempted to simply place a Link around the social login button with the to property to my API backend url, as follows:

  
  ...
  render(
    <h4 className="ui dividing header">
      Sign in with a Social Media Account
    </h4>
    <Link to="/auth/google/signin">
      <Button
        id="googleSigninButton"
        disabled={authenticating}
        className="google plus"
      >
        <Icon className="google plus" />
        Google Plus
      </Button>
    </Link>
  )
  ...

The problem is when I click on the Button the Router intercepts the link and attempts to render the component at that path and sets the browser location (in the nav bar), but does not actually cause the browser to perform the GET for the resource on the server--which results in my generic 404 Container being rendered. I have also attempted to use a plain anchor element, but this fails for the same reason above.

So, what I need to know is how can I force React Router to ignore a certain path and allow the browser to perform a GET on the resource?

Answer 1

Simply rewrite your Link tag with a tag. Like below

<a href="/auth/google/signin"> ... </a>