URL doesn't update when clicking <Link>

[eduardo305]

Hi!

I'm trying to update my URL without having a page reload. The idea is that on URL change, a modal would open in the current page. However, I'm seeing an exception throwing up on my console, which breaks my logic.

This is the origin URL:
/rent/mountain-view

and the target URL would be:

/rent/mountain-view/p4534/a-nice-condo

My pages folder contain the following structure:

- rent
   - [city]
        - index.js (used to display a component for the origin URL)
        - [pId]
            - [name]
                - index.js  (used to display a component for the target URL. I already tried to use [name].js without success)

Everything works fine if I'm deep linking or navigating through a link between these pages. However, as I mentioned, I need to only update the URL. To do so, I'm using "shallow={true}" in my component. Something like:

From /rent/mountain-view, I have:

<Link href="/rent/[city]" as="/rent/mountain-view/p4534/a-nice-condo" shallow={true}>
   <a>Open Modal</a>
</Link>

The error I get is something saying that my "as" attribute is not compatible with "href", which I literally understand. But if this is the case, how would I achieve my goal?

CURIOSITIES:

• Interestingly, this logic works pretty well if I'm on "/" and want to update my URL to "/anything".
• If I try to navigate from:

/rent (having a index.js inside /rent folder)

to

/rent/mountain-view/p4534/a-nice-condo

It works, however, after a few seconds, the page refreshes automatically and my logic goes down the toilet...

[jensmeindertsma]

Helllo @eduardo305 ! Try adding href="/rent/mountain-view/p4534/a-nice-condo" to <a>.

[eduardo305]

Hi @jensmeindertsma !

Thank you for your help. Unfortunately, that doesn't do the trick. What I noticed is that if I change my folder structure in order to have /rent/ always at the beginning of the URL, then I get it working. Looks like this trick won't work with dynamic routing. In other words, below setup works like a charm:

Origin URL:
/rent (here I have my list component)

target URL
/rent/mountain-view/p4534/a-nice-condo

with the following folder structure:

- rent
   - index.js (used to display a component for the origin URL)
   - [city]
        - [pId]
            - [name]
                - index.js  (used to display a component for the target URL. I already tried to use [name].js without success)

and here is my component:

<Link href="/rent" as="/rent/mountain-view/p4534/a-nice-condo" shallow={true}>
   <a>Open Modal</a>
</Link>

I'm wondering if this limitation is per design or it is a bug.

Any comments?

[zeekrey]

Helllo @eduardo305 ! Try adding href="/rent/mountain-view/p4534/a-nice-condo" to <a>.

In this case you could also use the passHref prop.

 <Link href="/" passHref>
          <a>Home</a>
 </Link>

[jensmeindertsma]

Hello @eduardo305 . I see that you are using multiple dynamic routes. You can replace all of those with one catch-all route. Then you can get the right data based on the router.pathname and the router.query.

[eduardo305]

Hi @zeekrey and @jensmeindertsma and everyone else. Thanks for your inputs, but I still don't have a solution for it my problem. I even deployed and minimal example on Vercel, which you can find here

Here is my git repo

All I want is to be able to update my url from /rent/[city]/ to /rent/[city]/[pId]/[name] without having a page refresh.
Please have a look at this file. This is where I'm placing such logic.

Thank you

[jamesmosier]

As far as I know, shallow routing only works with query string parameters, not changing route paths.

[eduardo305]

Hi @jamesmosier , but if you are navigating from / to /somewhere-else, you are navigating to other path, right?

[jamesmosier]

Correct, that is what I mean. / to /somewhere-else won't work shallowly, but / to /?foo=123 will.

[eduardo305]

I have one more update in this case. I downloaded this example:

https://github.com/vercel/next.js/tree/canary/examples/with-route-as-modal

which works really well. Then I created the folders rent/[city] and placed the existing code inside of it. Obviously I updated the href and as attributes accordingly. And surprisingly the same issue happens here. So I'm pretty sure now that this is a limitation of the framework. I believe we could classify it as a bug. Any thoughts?

[eduardo305]

Hi all!

I was able to figure out a way to accomplish my goal. I however had to create a /pads which is not variable.

My page will now display on /pads. However, the browser will show the URL as /pads/rent/mountain-view. When I try to open a home detail as a modal, my browser will show to /pads/rent/mountain-view/p42423/nice-condo as the URL, but I'm still keeping at /pads, which is my initial route.

Initially, I wanted to avoid having to have this /pads in the URL, but since this is a Next.js limitation, I'll go for it.
Thanks all for the help....