0
214
ViewsNextJS <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.
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.
3 answers
Answer question0
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>
0
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:
0
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>