React и React Router DOM - NavLink и Link не запускают поток OAuth на основе API

Question

Пока я создаю довольно простое приложение, которое использует сервер Node / Express с базовым API и интерфейсом React.

В Node / Express я использую Passport, чтобы пользователи могли войти в систему через Google, что работает на 100%.Однако только при использовании тега <a>.

Если я использую <NavLink> или <Link>, в адресной строке отображается обновленный URL-адрес /auth/google, но он не запускает поток.

Есть ли в этом случае какие-то ошибки в библиотекеact-router-dom?

Узел / Экспресс: 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 / logout. 'Но когда я использую <a>, они все прекрасно работают.

Answer 1

Было бы лучше, если бы вы показали нам часть реакции, а также серверную часть. response-router-dom не предназначен для отправки какого-либо запроса GET, поэтому вам, вероятно, следует обработать его с помощью fetch, axios или т. д. с помощью простой функции onClick.

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

Answer 2

Точно так же, как @kianoosh поделился, виртуальный маршрутизатор реагирует на маршрутизатор-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>

Он перенесет состояние истории в стек, но нет соответствующего маршрута для него, для которого будет отображаться компонент, и поэтому кажется, что он ничего не делает.

Несоответствующие маршруты к таким вещам, как конечные точки API, определенные на сервере Node / Express, должны запускаться со старым добрым тегом <a>.