如何使用<a> &amp; href tag in React-Router

Question

I need to use an <a href=""></a> in React Router in order to use Passport.js in my application for OAuthentication. Whenever I create an anchor tag and click it in React it just goes to a blank page in React Router and I don't even get the callback from my Node server on the backend with all the verification from Google/Facebook/Linkedin

What is a useful way to have an href tag in React-Router so that my backend can register it, go through its api flow with the callbacks, and then send it to the right place in React-Router?

The problem is this

The Problem of using axios.get() for OAuthentication with Passport.js

修改

在这篇文章中，他们遇到的问题与我的问题相同，解决方案只是一个简单的href标签，但是我的应用程序上有反应路由器，可能它们没有，也没有示例

Previous post about Authentication with Passport.js with React front

修改

我正在将这个项目从jQuery转移到React，React-Router和Redux，因此我的大多数服务器端Node代码都不需要更新，但这里是我使用Passport处理OAuth的路由的一部分。我只需要我的前线来达到这个目的，让它做它的事情，然后发回给我

router.get('/linkedin', passport.authenticate('linkedin'),
    function(req, res){
      console.log('nexted')
    }
  );

  router.get('/linkedin/callback', 
      passport.authenticate('linkedin', { failureRedirect: '/index' }),
    function(req, res) {
      console.log('here')
      res.redirect('/professionals');
  });

Answer 1

我在评论中注意到你提到了CORS问题，如果我是对的，我相信你正在使用授权代码授予OAuth流程，当我在不同服务器上使用SPA和后端时，我遇到了与GitHub相同的问题。如果是这种情况，则通过后端服务器提供SPA的静态文件。如果你这样做，你应该把下面的代码作为你的最后路由，以便React Router工作。您可以找到我做同样here

的回购

app.get('*', (req, res) => {
    res.sendFile(path.join(__dirname + '/client/index.html'));
});

注意：如果您不想这样做，可以使用隐式授权OAuth流程，并在SPA中进行身份验证。