Question

到目前为止，我正在构建一个非常简单的应用程序，它使用具有基本API和React前端的Node / Express服务器。

在Node / Express中，我正在使用Passport，因此用户可以100％使用Google登录。但是，仅当使用<a>标签时。

如果我使用<NavLink>或<Link>实现，地址栏将显示更新的URL /auth/google，但不会触发流程。

在这种情况下，react-router-dom库中是否存在一些陷阱？

节点/ Express：authRoutes.js

const passport = require("passport");

module.exports = app => {
  app.get(
    "/auth/google",
    passport.authenticate("google", {
      scope: ["profile", "email"]
    })
  );

  app.get(
    "/auth/google/callback",
    passport.authenticate("google"),
    (req, res) => {
      res.redirect("/surveys");
    }
  );

  app.get("/api/logout", (req, res) => {
    req.logout();
    res.send(req.user);
  });

  app.get("/api/current_user", (req, res) => {
    res.send(req.user);
  });
};

反应客户端：setupProxy.js

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

module.exports = function(app) {
  app.use(proxy(["/api", "/auth/google"], { target: "http://localhost:5000" }));
};

<NavLink>和<Link>不适用于用户直接访问的以下任何路由：“ / auth / google”，“ / api / current_user”或“ / api /注销”。 '但是当我使用<a>时，它们都可以正常工作。

Answer 1

如果您向我们展示反应部分以及后端，那会更好。 react-router-dom并不意味着发送任何GET请求，因此您应该使用简单的onClick函数通过fetch或axios等处理它。

<Link to="/anywhere" onClick={() => axios.get("http://localhost:5000/auth/google")}>Google Login</Link>

Answer 2

就像@kianoosh共享的那样，react-router-dom的虚拟路由器只会触发已设置的路由，其他所有内容只会推送历史记录状态而不会呈现组件。

所以...

<BrowserRouter>
    <Inner>
        <Header />
        <Route path="/" exact component={Landing} />
        <Route path="/dashboard" exact component={Dashboard} />
        <Route path="/account" component={Account} />
    </Inner>
</BrowserRouter>

如果您有：

<NavLink to="/another-link">Another Link</NavLink>

它将历史记录状态推送到堆栈，但是没有匹配的Route可以为其渲染组件，因此似乎无所事事。

到节点/ Express服务器中定义的API端点之类的不匹配路由将需要使用旧的<a>标签来触发。

React和React Router DOM-NavLink和Link不会触发基于API的OAuth流

2 个答案: