nextjs app router link not working with html inside link
Answered
West African Lion posted this in #help-forum
West African LionOP
import Link from "next/link";
function NavBar() {
return (
#Unknown Channel
<nav className="p-2.5 text-3xl font-medium">
<Link href="/" className="flex items-center" passHref>
<img className="w-12 m-1" src="/logo.png" alt="logo"></img>
<h3>Disha Learning</h3>
</Link>
</nav>
</>
)
}
export default NavBar;
function NavBar() {
return (
#Unknown Channel
<nav className="p-2.5 text-3xl font-medium">
<Link href="/" className="flex items-center" passHref>
<img className="w-12 m-1" src="/logo.png" alt="logo"></img>
<h3>Disha Learning</h3>
</Link>
</nav>
</>
)
}
export default NavBar;
52 Replies
West African LionOP
The link is not working
The url is showing on the bottom
but when i click, the link is not opening
Korat
What is passHref?
West African LionOP
i read about it on stackoverflow
Korat
Did you test without it?
West African LionOP
yep
Korat
Does it work if you remove it?
West African LionOP
nope
the link somehow works after ever two refreshes
exactly two refreshes
Korat
1) Can you check the terminal, check if the / page is being logged from nextjs logger
2) Are you sure you have a main page.tsx that matches /
3) Are you sure there isnt any middleware interrupting the redirection
4) I would also suggest upgrading to latest next version if you havent
2) Are you sure you have a main page.tsx that matches /
3) Are you sure there isnt any middleware interrupting the redirection
4) I would also suggest upgrading to latest next version if you havent
West African LionOP
how do i check if a middleware is interrupting??
i just started learning next
Korat
Maybe there is a middleware.tsx in your codebase that has code preventing the redirection
Can you also provide a simple screen record of the issue
West African LionOP
sure
just wanted to point out that only the links with element or components inside them are not working
the ones with string inside them are working
Korat
Hm, interesting, Ill probably give it a look a bit later
West African LionOP
Korat
Thats weird
West African LionOP
yes
works sometimes and doesnt work sometimes
Korat
Can you check the terminal for any logs?
West African LionOP
Warning: Invalid DOM property `crossorigin`. Did you mean `crossOrigin`?this is the only warning i am getting
i dont think it is related to this tho
@Korat
Korat
What's your nextjs version ?
West African LionOP
Korat
I just tried your code in a blank project, and it works as expected even without passHref
can you show me your folder structure
West African LionOP
Korat
Everything looks nice,
No reasons for link to not work out
No reasons for link to not work out
West African LionOP
ill just create a new project and try again
Korat
Start with typescript pls haha
West African LionOP
is typescript better??
bro
i think i found the error
West African LionOP
it was the fricking useEffect hook
Answer
West African LionOP
bruh
this stuff is so confusing
it works now tho
thx for the help man
Korat
Yeah typescript is better, and its being used in the majority of newly created projects.
Im happy you found it man,
I assumed there would be something interrupting the redirection if not middleware
I assumed there would be something interrupting the redirection if not middleware
West African LionOP
hmm
i learn typescript after finishing this project
thx for the help man
Korat
You are the most welcomed 🙂