Next.js Discord

Discord Forum

Why is `<Link` not working

Answered
Chinese softshell turtle posted this in #help-forum
Open in Discord
Chinese softshell turtleOP
          <Link href="/searchplaces">
            <p
              className="text-base font-semibold text-neutral-500"
              style={{ cursor: "pointer" }}
            >
              Places
            </p>
          </Link>


I thought doing this would make it so clicking on this the Link would go to /searchplaces route but nothing happens.
Answered by Chinese softshell turtle
issue was that if you moved the thing down, it went over the width 100% fixed element
View full answer

211 Replies

American Crow
If you use App router you most likely import <Link>from the wrong place. Have to import from next/link
Chinese softshell turtleOP
we import from right place
i import <Header
https://github.com/kuskusapp/kuskus is code
American Crow
Do you get any errors in console? The code you posted does not have errors
Okay let me check
Chinese softshell turtleOP
https://github.com/kuskusapp/kuskus/blob/main/app/places/page.tsx
is where its called
i do get some errors but i don't think its related
are links
i don't even have the cursor: pointer working on those links
American Crow
you are using useState within https://github.com/kuskusapp/kuskus/blob/main/components/Header.tsx#L13
but you didnt marke it as "use client"
Chinese softshell turtleOP
yea thats in new ver.
1 sec
pushed
its use client
<Link key={link.href} href={link.href}>
still not activating the href
clicking on these
American Crow
are you sure it's not the nested <p> with an onclick which fucks it up?
try deleting
      <p
                className={`text-base font-semibold ${activeLink === link.href ? "text-neutral-900" : "text-neutral-500"}`}
                style={{ cursor: "pointer" }}
                onClick={() => setActiveLink(link.href)}
              >
                {link.label}
              </p>

test without it
Chinese softshell turtleOP
          {links.map((link) => (
            <Link key={link.href} href={link.href}>
              <p
                className={`text-base font-semibold ${activeLink === link.href ? "text-neutral-900" : "text-neutral-500"}`}
                style={{ cursor: "pointer" }}
                // onClick={() => setActiveLink(link.href)}
              >
                {link.label}
              </p>
            </Link>
          ))}
so testing with this
still clicking on the thing does nothing
  return (
    <>
      <div className="flex flex-row space-x-15">
        <div className="flex flex-row space-x-4 mt-8 ml-10">
          {links.map((link) => (
            <Link key={link.href} href={link.href}>
              <p
                className={`text-base font-semibold ${activeLink === link.href ? "text-neutral-900" : "text-neutral-500"}`}
                style={{ cursor: "pointer" }}
                // onClick={() => setActiveLink(link.href)}
              >
                {link.label}
              </p>
            </Link>
          ))}
        </div>
there is no more onClick
American Crow
hm strange
can you delete whole <p> just for testing and try one more time
Chinese softshell turtleOP
if i delete <p>
i still need something inside no?
            <Link key={link.href} href={link.href}>
              <div>wat</div>
              {/* <p
                className={`text-base font-semibold ${activeLink === link.href ? "text-neutral-900" : "text-neutral-500"}`}
                style={{ cursor: "pointer" }}
                // onClick={() => setActiveLink(link.href)}
              >
                {link.label}
              </p> */}
            </Link>
like?
still not clickable
import Link from "next/link"
Link comes from
American Crow
hmm. Simplify more
...
<Link href="/places"> test Places </Link>
...

Does that not work either from within header.tsx?
Chinese softshell turtleOP
that works
American Crow
so its your loop but i don't see it
Chinese softshell turtleOP
mm
      <div className="flex flex-row space-x-15">
        <div className="flex flex-row space-x-4 mt-8 ml-10">
          {links.map((link) => {
            console.log(link, "link")
            return (
              <Link key={link.href} href={"/wat"}>
                <div>go to wat</div>
              </Link>
            )
          })}
        </div>
i don't get link log
strange
oh they were on top
mm
        <div className="flex flex-row space-x-4 mt-8 ml-10">
          {links.map((link) => {
            console.log(link, "link")
            return (
              <Link key={link.href} href={"/wat"}>
                go to wat
              </Link>
            )
          })}
        </div>
even this fails
        <div className="flex flex-row space-x-4 mt-8 ml-10">
if i remove this
it works
wtf
American Crow
🤷
looks like a bug
Chinese softshell turtleOP
        <div className="flex flex-row space-x-4">
with this works
American Crow
let me guess padding instead of margin it works?
Chinese softshell turtleOP
ok so
      <div className="flex flex-row space-x-15">
        <div className="flex flex-row space-x-4">
t
his works
but
        <div className="flex flex-row space-x-4 pt-8">
fails
        <div className="flex flex-row space-x-4 mt-8">
fails
American Crow
haha yea that looks like a bug to me
Chinese softshell turtleOP
https://github.com/vercel/next.js/issues/65739
ok hope they fix it
thanks
joulev
wtf this is crazy
How could Link’s behaviour depend on css
This is surprising
Chinese softshell turtleOP
maybe its something we did but i don't see it
  return (
    <>
      <div className="flex flex-row space-x-15">
        <div className="flex flex-row space-x-4">
          {links.map((link) => {
            return (
              <Link key={link.href} href={link.href}>
                {link.label}
              </Link>
            )
          })}
        </div>
its literally just this
@Chinese softshell turtle that works
joulev
<Link> becomes <a> so I’d say <p><Link /></p> is better than <Link><p /></Link>. Though there aren’t any reasons that I think of that makes one of these work and the other not work
in case above, the div is wrapping empty <Link, adding any padding/margin to it will break it
joulev
I’ll try the reproduction in the issue when I have the chance to do it
This bug is a bit too surreal, no way Link can break by css, that’s abnormal
Rhinelander
Didn't read it all but did you maybe make component that has same name as link?
Chinese softshell turtleOP
export default function Header() {
is component name
i don't have my own <Link component
Rhinelander
but did you name anything in a way that could interfere with link
Chinese softshell turtleOP
no
im making useObservable work now
but the code before didn't have any Link name clashes too
Rhinelander
try renaming links.map(link => ()) ---> to links.map(smthingelse => {})
Chinese softshell turtleOP
no help
i wonder if maybe its something with layout
Araucanian herring
I think <Link> tag is nested in <p> tag.
try it.
Chinese softshell turtleOP
what do you mean
        <div className="flex flex-row space-x-4">
          {local$.links.map((link) => {
            return (
              <Link key={link.href.get()} href={link.href.get()}>
                {link.label.get()}
              </Link>
            )
          })}
        </div>
change this?
i dont see p
Rhinelander
Does it work if you put link outside the map and just hardcode it
Araucanian herring
not use Link. use <a>. Does it work?
Chinese softshell turtleOP
      <div className="flex flex-row space-x-15">
        {/* TODO: adding margin/padding to this `div` will break <Link */}
        {/* https://github.com/vercel/next.js/issues/65739 */}
        <Link href={"/places"}>{"Places"}</Link>
works
map breaks it?
mby you can't map over <Link
Rhinelander
Now we know link is not problem
Araucanian herring
I know, I know. you must use "for" instead of "map"
It is problem about async and sync.
Chinese softshell turtleOP
Araucanian herring
@Chinese softshell turtle does it work?
Chinese softshell turtleOP
        <div className="flex flex-row space-x-4">
          {local$.links.forEach((link) => {
            return (
              <Link key={link.href.get()} href={link.href.get()}>
                {link.label.get()}
              </Link>
            )
          })}
        </div>
thought it would be just one replace
or what do you mean
Araucanian herring
no foreach. must use for.
Chinese softshell turtleOP
how to use for inside jsx
Araucanian herring
foreach and map are async function.
Chinese softshell turtleOP
in solid there is <For
Chinese softshell turtleOP
next.js / react doesn't have this i assume
Araucanian herring
define function outside jsx
Chinese softshell turtleOP
those for loops always looked disgusting to me
oh well
so issue is that i have client component
and i can't .map Link
because its async or smth?
im confused
Araucanian herring
do you use "..."?
Chinese softshell turtleOP
whats ..
Araucanian herring
operator
<div className="flex flex-row space-x-4">
{...local$.links.map((link) => {
return (
<Link key={link.href.get()} href={link.href.get()}>
{link.label.get()}
</Link>
)
})}
</div>
Chinese softshell turtleOP
        <div className="flex flex-row space-x-4  mt-8 ml-10">
          {...local$.links.map((link) => {
            return (
              <Link key={link.href.get()} href={link.href.get()}>
                {link.label.get()}
              </Link>
            )
          })}
        </div>
still breaks it
mt-8 will break link
without works
Araucanian herring
it must work.
Chinese softshell turtleOP
Rhinelander
Try adding padding
Chinese softshell turtleOP
breaks
Rhinelander
Maybe link works but gets moved
Chinese softshell turtleOP
        <div className="flex flex-row space-x-4 pt-4">
so this is working
Rhinelander
Change space-x for gap spacex can be sometimes buggy
Chinese softshell turtleOP
now with <div className="flex flex-row space-x-4 pt-4">
i dont even see <a lol
        <div className="flex flex-row gap-2 pt-4">
same with
Rhinelander
What the f...
This is cursed
Araucanian herring
did you use <a> instead of <link>?
try it.
<div className="flex flex-row space-x-4">
{local$.links.map((link) => {
return (
<a key={link.href.get()} href={link.href.get()}>
{link.label.get()}
</a>
)
})}
</div>
it works?
Chinese softshell turtleOP
same thing
cursed indeed
thats with <a
Araucanian herring
oh, it makes me crazy.
Can you give me github url?
Chinese softshell turtleOP
https://github.com/kuskusapp/kuskus
im checking to turn this off now
        <div
          style={{
            position: "fixed",
            top: 20,
            right: 20,
            width: "100%",
            zIndex: 100,
          }}
          className="flex flex-row space-x-2 justify-center"
        >
          <div
            className="mb-5 flex justify-center items-center space-x-3 rounded-full py-2"
            style={{
              width: "13%",
              marginLeft: "auto",
              marginRight: "10px",
              justifyContent: "center",
              backgroundColor: "rgb(47 47 48)",
              boxShadow: "5px 5px 15px rgba(0, 0, 0, 0.3)",
            }}
          >
            <GridIcon className="text-white w-7 h-7" />
            <SearchIcon className="text-white w-7 h-7" />
            <UserIcon className="text-white w-7 h-7" />
            <NotificationIcon className="text-white w-7 h-7" />
          </div>
          <button
            style={{
              backgroundColor: "rgb(47 47 48)",
              width: "40px",
              height: "40px",
              boxShadow: "5px 5px 15px rgba(0, 0, 0, 0.3)",
            }}
            className="rounded-full items-center justify-center flex text-white focus:outline-none focus:ring"
          >
            <PlusIcon className="text-white w-7 h-7" />
          </button>
        </div>
yea its this shit
its just i didnt write this css code, was just asked to fix the link
didn't think that fixed would break it fml
trying to make it work without fixed
Chinese softshell turtleOP
issue was that if you moved the thing down, it went over the width 100% fixed element
Answer
Chinese softshell turtleOP
so it overrode it
my bad for not checking code below
😿
not next.js bug, thanks all ♥️
@Chinese softshell turtle Click to see attachment
Brown bear
Can you show the inspect status?
Chinese softshell turtleOP
yea works now
Brown bear
well good
Araucanian herring
I am sorry. Still couldn't run it.edgedb don't init.
Chinese softshell turtleOP
oh no worries
whats the error
i can help resolve
Araucanian herring
how?
Chinese softshell turtleOP
edgedb project init
should in theory work
after curl --proto '=https' --tlsv1.2 -sSf https://sh.edgedb.com | sh
Araucanian herring
But it isnot working.
Chinese softshell turtleOP
what is the error in terminal
or no error, how do you know it doesn't work
Araucanian herring
Chinese softshell turtleOP
very annoying, didn't run edgedb on windows

I will post this error in edgedb discord, https://discord.gg/edgedb
again, thanks everyone for help, appreciate it lots :magic_sparkles:
Araucanian herring
still?
@Araucanian herring still?
Chinese softshell turtleOP
my error is fixed, the edgedb one, https://discord.com/channels/841451783728529451/849377751370432573/1239923239170478121 will have answer hopefully soon
it runs on linux/mac without issues, never tested on windows
Araucanian herring
your error?
it is working?
Chinese softshell turtleOP
yea its fixed
Araucanian herring
how?
Chinese softshell turtleOP
was issue with another element that had position: fixed with full width in same component
we rewrote it to use sticky
or rather
width: "fit-content",
was enough
Araucanian herring
oh. i know newly.