Invalid href passed to next/router: \, repeated forward-slashes (//) or backslashes \ are not valid in the href

[Brawl345]

I'm getting this warning on Windows. I guess it has to do with the path. Not sure if it can be fixed but it's slightly annoying.

Invalid href passed to next/router: \, repeated forward-slashes (//) or backslashes \ are not valid in the href

The application works without problems though.

[joaquimnet]

This one happens on windows machines. Related to this, it makes the posts page not work during development. But it shouldn't be a problem in production I believe.

[Isoldhe]

I have this issue with the default example project... Is there a fix?

[ra-kesh]

I have been having this exact issue too..hoping someone can share a fix soon...

[makoto-developer]

I think it is an OS-independent probrem. I also got same error on macOS.

[FernandoTimo]

I got the same error, i am working with dynamic routes, i have inside pages folder: [profiles].js and watch.js. From [profiles].js I did the following:

const router = useRouter()
const image = { id: 2 }
...
<div ... 
    onClick={() => {
        router.push(`[profile]?i=${image.id}`, `watch?i=${image.id}`, {
            shallow: true,
    });
}}>...

When visiting the route '/alvaro_timo' (or any test route) I get this error in the browser console. But everything seems to work fine (shallow routing works fine):

next-dev.js?3515:32 Invalid href passed to next/router: //alvaro_timo, repeated forward-slashes (//) or backslashes \ are not valid in the href

[pvhieuit]

same error

[wilsonteh]

The answer is in the error message itself, double check ur href to see if it contains repeated forward-slashes // or backslashes \ as they are invalid in href. Hope it helps

[alanaberdeen]

One possible cause:

You are using template literals to define your href (href={`/posts/${postName}/comments} for example).

If you are setting this postName variable after hydration or in a useEffect and the default is an empty string ('') this will lead to repeated forward-slashes in the href until the variable has been updated.

[ahalaburda]

Try using getServerSideProps to get the id's or other data. That's probably it gonna solve that issue of empty string.

[chea1tei]

Is there any fix on this?

[kevinlu1248]

Hey there, I gave this problem a shot using Sweep, an AI junior dev: https://github.com/kevinlu1248/nextra/pull/5

[mydjolie]

I solved it! Just like alanaberdeen explained :)

Before setPath(/lessons/${lessonModule}/${lessonName});

After setPath(/lessons/${lessonModule}${lessonName ? /+${lessonName} : ""});

Explanation : When using string template literal in href property, you just need to make sure that value must be present. if not, in href path will appear with // in the first time before the variable in ${value} is assigned.

For example, setPath(/lessons/${lessonModule}${lessonName ? /+${lessonName} : ""}); I added conditional logic to check if lessonName has value or not, if not add just "" if yes, add / with path ${ lessonName ?/+${lessonName}: ""}

Hope this helped :)

[Hossein-azizdokht]

I solved it and it works for me. If you write the link as : href={`/${postName}} you need to remove the '/' from the beginning of it.

[SankThomas]

For me, it was because I added a trailing forwardslash in my theme.config.jsx when I defined docsRepositoryBase as follows:

docsRepositoryBase: "https://github.com/SankThomas/learnerspree/tree/main/"

So I just removed the forwardslash after main so that it became:

docsRepositoryBase: "https://github.com/SankThomas/learnerspree/tree/main"

and it solved that. Hope it helps.