New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Allow Incompatible HREF and AS values #9700
Comments
I would also appreciate this pattern working or some idea on how to achieve it in light of the emitted error. I asked on Spectrum a few months ago but it didn't get far that way. There used to be a Next.js example built by Guillermo Rauch floating around called nextgram that showcased the Instagram style modals and url pattern you described. It was one of the original key inspirations for us trying and then moving to Next.js. I don't think the example would work with the modern dynamic url syntax. |
I would also appreciate having this feature. Currently, my URLs are like
which I would like to convert to
|
Linking to #9081, as this will probably need fixed due to the addition of rewrites. |
@tomevans18 Thanks for your work on this. @Timer This is a crucial requirement for me. Instagram style modals are increasingly in demand and make for a much nicer user experience when viewing assets on a long list (like one with infinite scroll). So anything I can do to help with this, please let me know. |
If nobody's working on this, I can take a crack at it. Let me know if I should hold back. |
There's already an open PR as you can see on the issue timeline: #9837 |
@timneutkens haha, I know. It’s not a great solution to achieving Instagram style modals, though. I’ll draft a separate PR with a different proposal. |
Highly recommend writing up what you're planning to do first as it's unlikely we'll merge a PR changing routing behavior. |
@Timer @timneutkens Sorry, I confused @tomevans18 solution (merely commenting out the PR #9837 is an elegant solution. Just tried it out, and it works perfectly for Instagram style modals. May I ask what's holding this back from being merged? And what might be the expected merge ETA? |
Supported in |
@Timer Thank you so much!!! |
Late to the party. I had me notifications disabled so missed it all! |
I've updated to 9.2.1 for this but I still get the error:
|
Fixed by changing the structure of the link to:
|
This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you. |
Feature request
Is your feature request related to a problem? Please describe.
To allow for advanced usage of routing we currently have the capability to use
Link
androuter.push/replace
with unmatched/incompatiblehref
andas
values.For example, we are able to do the following:
This allows developers to implement advanced routing UX such as instagram style modals, where a modal can open on the same page but also have a dedicated page.
The current challenge is that when a dynamic element is added to the values an error is emitted noting incompatible
href
andas
values - https://github.com/zeit/next.js/blob/master/errors/incompatible-href-as.mdFor example:
Describe the solution you'd like
The reason this error is produced is due to the following section of code, which checks both values match:
https://github.com/zeit/next.js/blob/69b7538dce2fa8853bccfa2f65c8c305d76daae3/packages/next/next-server/lib/router/router.ts#L319
On removing this check all routing functions as expected (including the dynamic route) and all tests still pass.
For this reason I would like to request that this section of code is reviewed and potentially removed.
Describe alternatives you've considered
An alternative solution is to allow a flag that disables this route match check, potentially reducing features for this situation and/or allowing for an at risk implementation (if there is a risk introduced when removing this route match check)
Additional context
I have forked an instagram clone, updating the next package to the latest version and introduced a dynamic route.
When disabling the section of code noted above all routing functionality works as expected:
https://github.com/tomevans18/nextagram
I have also forked next.js and commented out the section of code noted above.
When running the tests against this repo, all routing tests pass:
https://github.com/tomevans18/next.js
If there is any additional investigation work that needs to be done to help this feature happen please let me know and I will be happy to oblige.
The text was updated successfully, but these errors were encountered: