NextJS <Link> Takes me to 404

user_8134201 0
Viewed 735

I've seen this question asked around online Im trying to implement suggested solution but still not working for me. So my apologies for the duplicate.

Anyway I have a simple link tag which is throwing a 404

<Link className={classes.navbarDesktopMenuButton} href="/profile/[id]" as={`/profile/${username}`}>
  <Button>
    <strong className={classes.navbarDesktopMenuButton}>My Profile</strong>
  </Button>
</Link>

I am quite certain im navigating to the right route so not sure why i am still getting the 404.

enter image description here

Note if i navigate on the first time it will 404 for like a second then the page will popup. But if i navigate out of the page then navigate back then its just stuck on the 404 the 2nd 3rd 4th time etc.

I know its some nextjs thing that I'm just misunderstanding since the route works fine if I were to use < a > tags instead of < Link > tags

Any help would be appreciated thanks.

react-router next.js reactjs routes javascript
3 Answers

You can try this.

<Link
    className={classes.navbarDesktopMenuButton}
    href={{
        pathname: "/profile/[id]",
        query: { id: username },
    }}
    as={`/profile/${username}`}
>
    <Button>
        <strong className={classes.navbarDesktopMenuButton}>My Profile</strong>
    </Button>
</Link>
user_169652690
user_173938270

You might have to use an anchor tag instead of the button component, but the rest of this code should make it work!

<Link className={classes.navbarDesktopMenuButton} href={`/profile/${username}/`}>
    <Button>
        <strong className={classes.navbarDesktopMenuButton}>My Profile</strong>
    </Button>
</Link>
user_136226750
Related