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!

Top comments (0)