CODEWITHSUNDEEP
javascriptreactjsroutesreact-routernext.js
benjamin852
benjamin852

Reputation: 609

NextJS <Link> Takes me to 404

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.

Upvotes: 3

Views: 5025

Answers (3)

Siddharth Borderwala
Siddharth Borderwala

Reputation: 51

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>

Upvotes: 0

Dhaval Samani
Dhaval Samani

Reputation: 277

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>

Upvotes: 1

Kim
Kim

Reputation: 15

use 'a' tag, inside the Link tag.

https://nextjs.org/docs/tag/v9.5.2/api-reference/next/link#dynamic-routes

for lastest versions of nextjs:

https://nextjs.org/docs/api-reference/next/link

Upvotes: 0

Related Questions