javascript - Next.js Link "as" decorator stopped working for dynamic routes? - Stack Overflow

admin管理员组

文章数量:1324829

I have a dynamic route:

test/[id].js

When user clicks on a link pointing to /test/1 Next.js ends up rendering the proper page as intended.

The funny business starts when I want to have /test/1 url masked with anything else.

<Link href="/test/1" as="/any/thing/here">

As far as I understand the above code should:

• move user to test/1 and render test/[id].js,
• hide the domain/test/1 url behind domain/any/thing/here.

What happens is it does not point to test/[id].js at all, just returns a 404.

Sandbox link with broken code:

=/pages/index.js

What am I doing wrong here? I have a really long and plex urls with lots of slashes I have to use with Next.js dynamic routing, and I don't see any other solution than using "as"... I'm pretty much sure I used to use it a few years back and it just worked! Seems like it worked for this guy as well: Linking to dynamic routes in Next.js

If Next.js changed something then how I recreate this functionality easily?

I have a dynamic route:

test/[id].js

When user clicks on a link pointing to /test/1 Next.js ends up rendering the proper page as intended.

The funny business starts when I want to have /test/1 url masked with anything else.

<Link href="/test/1" as="/any/thing/here">

As far as I understand the above code should:

• move user to test/1 and render test/[id].js,
• hide the domain./test/1 url behind domain./any/thing/here.

What happens is it does not point to test/[id].js at all, just returns a 404.

Sandbox link with broken code:

https://codesandbox.io/s/nervous-silence-z62s1?file=/pages/index.js

What am I doing wrong here? I have a really long and plex urls with lots of slashes I have to use with Next.js dynamic routing, and I don't see any other solution than using "as"... I'm pretty much sure I used to use it a few years back and it just worked! Seems like it worked for this guy as well: Linking to dynamic routes in Next.js

If Next.js changed something then how I recreate this functionality easily?

• javascript
• next.js
• next-router

Share Improve this question Follow asked Jul 1, 2021 at 8:55 WordpressorWordpressor 7,5532626 gold badges7474 silver badges115115 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

I think you need to write href like that:

      <Link
        href="/test/[id]?id=1"
        // Or like that
        href={{
          pathname: '/test/[id]',
          query: { id: '1' }
        }}
        as="/any/thing/here"
      >
        <a>Link to test/1 - 'as' decorator is broken?</a>
      </Link>

I am not sure why it works like that, but I saw it somewhere some time ago and I use it like that since then. I think there is no information about it in the docs.

And be sure that /any/thing/here page actually exists too, because otherwise if user refresh browser after client side navigation there will be 404 anyway.

本文标签： javascriptNextjs Link quotasquot decorator stopped working for dynamic routesStack Overflow