Link goes to the wrong path?

Answered

American Sable posted this in #help-forum

American SableOP

2023-07-06T11:18:43.000Z

I've got a component that includes the following

// selected = Lessons
<Link href={`${selected}`}><Button>Next</Button></Link>

If I inspect the Element, I can see the following

<a href="Lessons">

If I click the href Link in the Element inspector in Chrome, or hover over my button, I can see the URL it will go to as http://localhost:3000/owners/bookables/new/Lessons which is correct.

However, if I actually click my Button, it takes me to http://localhost:3000/Lessons

Any idea whats going on?

Answered by American Sable

Created my own Link component

"use client"
import Link from "next/link";
import { usePathname } from 'next/navigation'
export default function Alink({children, href, ...props}){
    const pathname = usePathname()
    return (
        <Link href={`${pathname}/${href}`} props>{children}</Link>
    )
}

View full answer

10 Replies

American SableOP

2023-07-06T11:19:42.000Z

My route structure for reference

American SableOP

2023-07-06T15:38:05.000Z

@American Sable I've got a component that includes the following // selected = Lessons <Link href={`${selected}`}><Button>Next</Button></Link> If I inspect the Element, I can see the following <a href="Lessons"> If I click the href Link in the Element inspector in Chrome, or hover over my button, I can see the URL it will go to as `http://localhost:3000/owners/bookables/new/Lessons` which is correct. However, if I actually click my Button, it takes me to `http://localhost:3000/Lessons` Any idea whats going on?

alfon

2023-07-06T15:46:32.000Z

i dont think Link component supports relative URL

so it has to be full from root path

cornflour

2023-07-06T15:48:56.000Z

can you try this?

<Link href={`/${selected}`}><Button>Next</Button></Link>

The slash at the beginning should tell it that it should be starting from the root rather than relative to the current path

@cornflour can you try this? tsx <Link href={`/${selected}`}><Button>Next</Button></Link> The slash at the beginning should tell it that it should be starting from the root rather than relative to the current path

alfon

2023-07-06T15:49:45.000Z

OP doesnt want to send to the root.
OP wants it to send to /owners/bookables/new/Lessons

cornflour

2023-07-06T15:50:53.000Z

oh yea i misread
then they prob need to add the full pathname

alfon

2023-07-06T15:51:06.000Z

thats the way

American SableOP

2023-07-06T17:01:30.000Z

Thanks, bit rubbish if i change my routes though, then i've got to refactor everything, rather than it being relative

American SableOP

2023-07-10T10:24:17.000Z

Created my own Link component

"use client"
import Link from "next/link";
import { usePathname } from 'next/navigation'
export default function Alink({children, href, ...props}){
    const pathname = usePathname()
    return (
        <Link href={`${pathname}/${href}`} props>{children}</Link>
    )
}

Answer