Router.push Shallow writing wrong URL using Middleware NextResponse.rewrite(url) about platforms HOT 10 CLOSED

And solved! Posting here in case someone else is running into the same issue. vercel/next.js#45886 (comment)

from platforms.

Hey @minardimedia! So sorry for the late response – this should've been fixed with our new middleware here. Please try it out and let me know if it works!

I'll close this issue for now but feel free to reopen it if there are any other issues!

from platforms.

Hey @steven-tey, just so you know I'm currently running into this issue ([email protected]).

Using both shallow and non-shallow routing, I'm experiencing the same behaviour as above.

Any ideas on how to resolve this?

from platforms.

@steven-tey, as far as I can tell, the issue doesn’t seem to be with the middleware, but with the router handler.

1. Middleware rewrites a path to a hidden folder (e.g. /_sites/[site])
2. Router pushes a shallow update to the queries, and it results in /_sites/[site]?somequery=true appearing in the URL.

How does one do a shallow router push considering the hidden folder?

Note: if I do something like router.push({ pathname: router.pathname.replace('/_sites/[site]', '') it then ends up constantly reloading the page.

from platforms.

@minardimedia and @sinclairnick were you able to resolve this? It’s driving me stark mad... spent an entire day on this so far, with no solution in sight.

from platforms.

@heymartinadams I think at the end I didn't use the router push I think the reason I wanted to implement this was so I can persist the url state in the query. So I use a library called Jotai they have a couple cool ways to store the data and read data from the url if I am not wrong I use the atomWithHash() hook so at the end I just use the < Link > component and form the url string like this

 href = `/room/${room.id}/book#${guestsStringQuery(
      guests
    )}&check_in=${checkIn.format("YYYY-MM-DD")}&check_out=${checkOut.format(
      "YYYY-MM-DD"
    )}`;

So there is a store that keeps in sync check_in check_out data

Here is the library Jotai Location hope this can help in your use case

from platforms.

Thank you, @minardimedia! I'll use that library if I can't get router.push to work.

from platforms.

@steven-tey do you think this issue is merely due to an incorrect configuration of middleware, or a flaw in router when combined with middleware and subdomains?

From what I can tell, router.push({ query: { site: 'mysubdomain', price: 'mfi49o' } }, undefined, { shallow: true }) does not engage middleware to rewrite, which causes the URL to display: mysubdomain.localhost:3000/_sites/mysubdomain/. This may be intentional (i.e. not invoking use of middleware), but defeats the URL masking.

If I do router.push('http://mysubdomain.localhost:3000/?price=mfi49o', undefined, { shallow: true }) in order to hide /_sites/[site] then the URL does a complete reload.

from platforms.

@steven-tey I posted this issue, with reproduction, on the main next site, because the issue does indeed seem to lie with next/router. vercel/next.js#45886

from platforms.

I have a similar setup to this repo but I'm using the app directory. It doesn't seem like the router imported from next/navigation supports shallow routing. Any hint to solve that?
cc @steven-tey I see that you've started to have a look at moving to the app directory in #161

from platforms.