Nuxt•2y ago

500 Infinite redirect in navigation guard

Hello guys, I'm struggling with a global middleware I created to handle some 301 redirects. I've simplified the structure to debug it and I got to this point:

// redirects.global.ts

const redirects301 = [
  {
    from: "/old",
    to: "/",
  },
];

export default defineNuxtRouteMiddleware((to, from) => {
  console.log("from", from.path);
  console.log("to", to.path);

  const match = redirects301.find((item) => item.from == from.path);

  if (match) {
    console.log("REDIRECTING...");
    console.log("match", match);
    return navigateTo(match.to, { redirectCode: 301 });
  }
});

// redirects.global.ts

const redirects301 = [
  {
    from: "/old",
    to: "/",
  },
];

export default defineNuxtRouteMiddleware((to, from) => {
  console.log("from", from.path);
  console.log("to", to.path);

  const match = redirects301.find((item) => item.from == from.path);

  if (match) {
    console.log("REDIRECTING...");
    console.log("match", match);
    return navigateTo(match.to, { redirectCode: 301 });
  }
});

In order to reproduce the issue I followed exactly these steps: - npx nuxi init demo - cd demo - yarn install (Nuxt 3.4.1) - created middleware directory and moved the redirects.global.ts file to it - created pages directory and added index.vue and about.vue - yarn dev - open the following url in your browser: http://localhost:3000/old => "500 Infinite redirect in navigation guard" Other routes work fine, but when the middleware return navigateTo('something') something goes wrong. Any idea? Am I missing something about the logical working of a middleware?

3 Replies

danielroe•2y ago

you likely want to match to.path and not from.path

basic-phOP•2y ago

Thank you very much for your advice Daniel, I got it working after some reasoning about "to"/"from" logic. Have a nice day/night! 🇮🇹 👋

danielroe•2y ago

Great! 🙌

Gaming

Programming

500 Infinite redirect in navigation guard