NuxtN
Nuxt•3y ago
basic-ph

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 });
  }
});

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?
Was this page helpful?