使用带有express的react-router妨碍注销？

Question

我的设置：

我有反应路由器来处理组件更改并表示要运行来自数据库的获取请求。

反应在端口3000上

express在端口5000上。

react已设置为在其客户端文件夹的setupProxy.js文件中代理到端口5000，并且在其包Json中是代理指令。

setupProxy.js

const proxy = require("http-proxy-middleware");

module.exports = function(app) {
    app.use(proxy('/auth', { target: 'http://localhost:5000/' }));
};

react package.json（partial）

"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  },
  "proxy": "http://localhost:5000", // <--important detail here
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ]

快递我有护照可以登录，并且可以使用！好极了！我可以根据最初的axios用户登录请求发送所需的json。

问题

这是我的快递指示：

app.get("/logout", function(req, res) {
  req.logout();
  res.redirect("/");
});

对于注销，我在护照js中使用无效的简单href =“ / logout”作为默认代码。对于登录，我再次使href =“ / auth / google”变得非常简单，并且可以正常工作。注销不会注销并重定向到首页，而是转到/ logout并停留在那儿，使我保持登录状态。

我猜这是在发生，因为它干扰了React Router，因为这种情况一直在发生，我正试图重新设计我的后端代码以解决此问题。当然，我还不清楚其原因或方式。我将不胜感激对此事的任何投入。

Answer 1

所以解决方案似乎是我应该运行获取请求，而不是直接链接。我将href更改为onclick handleLogout函数，如下所示：

const handleLogout = () => {
  axios.get("http://localhost:3000/logout").catch(err => {
    console.log(err);
  });
};

希望这对子孙后代有帮助