DEV Community

Cover image for Invalid href passed to next/router on"next": "12.0.7"
Gem Cloud
Gem Cloud

Posted on

Invalid href passed to next/router on"next": "12.0.7"

Environment:

  • Windows 11
  • "next": "12.0.7"
  • TypeScript ( Js should have same issue).
  • Dynamic router link

I met an error "
Image description: \, repeated forward-slashes (//) or backslashes \ are not valid in the href", which always shown on VScode & web browsers!

The root cause is that I joined "/" with my each url string when I generate dynamic links. (nextjs V9 looks should do it!)

href: join('/', slug), 
Enter fullscreen mode Exit fullscreen mode
slugRoot = "/"
slugAbout = "/about"
Enter fullscreen mode Exit fullscreen mode

Solution: Do NOT add "/" on head of your url string, and then add "/" on your tag.

// href: join('/', slug), 
href: slug,
Enter fullscreen mode Exit fullscreen mode
slugRoot = ""
slugAbout = "about"
Enter fullscreen mode Exit fullscreen mode
// <Link href={`/${yourPath}`} ></Link>
<Link href={`/${href}`} key={href} prefetch={false} passHref>
Enter fullscreen mode Exit fullscreen mode

Happy Coding!

Discussion (0)