React router 4 - Link to page outside react app

Question

I'm building a node + react app that uses passport's facebook authentication. Getting this authentication to work involves hitting an express route '/auth/facebook'. Unfortunately as soon as the react app loads up react router 4 doesn't allow links to directly hit the express server and instead searches for a react route matching 'auth/facebook'. In short how do I link to a route within my application but outside of the react app when using react router 4?

Show your code. It sounds like you're describing an Ajax call, which would not involve react router in any way. Is this a link your user clicks on, or a behind the scenes api call? — stone
its a simple link in an a tag - <a href = "auth/facebook">Login</a>. But instead of hitting auth/facebook on the express server it looks for a react component. — Rushil Saraogi
react-router is for client side routing, you can't get to a server route with relative path. you should include the full domain route to hit a server. (this will cause a refresh). — Sagiv b.g
@Sag1v I tried that as well. Basically what happened was that initially I had the client running on a separate port (localhost:3000) and the express server running on localhost:8080. But after getting the server to pick up the client side app the server and client were on the same port - because of which I'm not able to hit localhost:8080/auth/facebook anymore. — Rushil Saraogi
Are you using the create-react-app boilerplate? Or Webpack for that matter? Try proxying your api server with "proxy": "http://localhost:8080/" in package.json of your client project. — xDreamCoding

Pubudu Dodangoda Pubudu Dodangoda · Accepted Answer · 2017-12-18T04:51:00

React Router is only for client side routing. Use fetch API or a similar library for that.

I'll state one way of solving your problem (using fetch and without react router).

Remove the href from the <a> tag
Add an event listener for the click event, <a onClick={makeCall}>

Then in the makeCall function, you can call the backend using the fetch API(or axios or whatever),

makeCall() {
    fetch('/auth/facebook', options)
        .then((res) => {
            // Something 
        })
        .catch((err) => {
            // handle error
        });
}

React router 4 - Link to page outside react app

1 Answers