Skip to content
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

router.back() causes an error on intercepted route #65162

Closed
Neutrlno opened this issue Apr 29, 2024 · 10 comments
Closed

router.back() causes an error on intercepted route #65162

Neutrlno opened this issue Apr 29, 2024 · 10 comments
Labels
bug Issue was opened via the bug report template. locked Parallel & Intercepting Routes Related to Parallel and/or Intercepting routes.

Comments

@Neutrlno
Copy link

Link to the code that reproduces this issue

https://codesandbox.io/p/devbox/shy-sky-lnkhzt

To Reproduce

  1. Click "link to secondary"
  2. Click "to signin" button
  3. Click "back" button

Current vs. Expected behavior

Current: on step 3 error occures. Expected: no error

Provide environment information

Operating System:
  Platform: linux
  Arch: x64
  Version: #1 SMP PREEMPT_DYNAMIC Sun Aug  6 20:05:33 UTC 2023
  Available memory (MB): 4102
  Available CPU cores: 2
Binaries:
  Node: 20.9.0
  npm: 9.8.1
  Yarn: 1.22.19
  pnpm: 8.10.2
Relevant Packages:
  next: 14.3.0-canary.26 // There is a newer canary version (14.3.0-canary.29) available, please upgrade! 
  eslint-config-next: N/A
  react: 18.2.0
  react-dom: 18.2.0
  typescript: 5.1.3

Which area(s) are affected? (Select all that apply)

Parallel & Intercepting Routes

Which stage(s) are affected? (Select all that apply)

next dev (local), next start (local)

Additional context

The yellow error that occures in the sandbox console is like this(copied from my VSCode console):
Performing hard navigation because your application experienced an unrecoverable error. If this keeps occurring, please file a Next.js issue.

Reason: Segment mismatch
Last Action: server-patch

Current Tree: ["",{"children":["(auth)",{"children":["forgot-password",{"children":["PAGE",{},"/forgot-password","refresh"]},null,null]},null,null],"authModal":["PAGE",{"children":["PAGE",{},"/","refresh"]},"/","refresh"]},null,null,true]

Tree Patch Payload: ["PAGE",{}]

@Neutrlno Neutrlno added the bug Issue was opened via the bug report template. label Apr 29, 2024
@github-actions github-actions bot added the Parallel & Intercepting Routes Related to Parallel and/or Intercepting routes. label Apr 29, 2024
@shubhankartrivedi
Copy link

shubhankartrivedi commented May 3, 2024

 <button
        onClick={() => {
          router.push("/signin");
          router.refresh();
        }}>
        {"to signin"}
</button>
  Why you have `router.refresh()` after push?

@AbhiShake1
Copy link
Contributor

hello, i am unable to reproduce it in 14.3.0-canary.37. could you try and give a quick update on that version please?

@Neutrlno
Copy link
Author

Neutrlno commented May 6, 2024

 <button
        onClick={() => {
          router.push("/signin");
          router.refresh();
        }}>
        {"to signin"}
</button>
  Why you have `router.refresh()` after push?

Because it is a part of the issue. Actually, that is the way i tried to make intercepted routes work in my main app. If i didnt use router.refresh(); then i couldnt navigate to the intercepted page in some cases.

@Neutrlno
Copy link
Author

Neutrlno commented May 6, 2024

hello, i am unable to reproduce it in 14.3.0-canary.37. could you try and give a quick update on that version please?

error still exist both in the sandbx with the mentioned next version and in my main app

@ztanner
Copy link
Member

ztanner commented May 9, 2024

Hi @Neutrlno -- both of your reproductions seem to have this pattern of routing to a new page and triggering router.refresh() simultaneously. I think this is the source of the bugs, so I'd like to better understand why you added it so we can look into that, since I don't think it should be necessary and I could see it leading to confusing results.

You mentioned:

Actually, that is the way i tried to make intercepted routes work in my main app. If i didnt use router.refresh(); then i couldnt navigate to the intercepted page in some cases.

To me, that sounds like maybe you were having trouble with the soft navigation behavior described here. Are you able to share an updated repro of what you weren't able to get working, without router.refresh()?

@Neutrlno
Copy link
Author

@ztanner i updated https://codesandbox.io/p/devbox/shy-sky-lnkhzt sandbox with extra buttons that don't use refresh. When using them, the modal closing and navigating from it work as expected just for the first time. When you continue navigating back and forward between secondary and signin - navigation just stops to work. I tried to add [...catchAll] with a page.tsx file that returns null in a @modal slot with no effect. I just want to implement a intercepted route modal window from which i can navigate to other routes. But i always fail. Help me achieve that By the way, router.refresh() approach works in a next 14.1.4 (except some 2% rare occasions).

@ztanner
Copy link
Member

ztanner commented May 13, 2024

Hi @Neutrlno -- it seems there was still a router.refresh() inside the "to secondary (no refresh)" button in (.)signin/modal.tsx.

I forked your Sandbox here, and added the catch-all, and it seems to work consistently for me:

https://codesandbox.io/p/devbox/fervent-currying-2m7dlz

@ztanner
Copy link
Member

ztanner commented May 20, 2024

I'm going to close this issue as I cannot reproduce and the above sandbox demonstrates correct behavior, but feel free to reach back out if you're unable to get it to work.

@ztanner ztanner closed this as not planned Won't fix, can't repro, duplicate, stale May 20, 2024
@Neutrlno
Copy link
Author

Neutrlno commented May 21, 2024

I'm going to close this issue as I cannot reproduce and the above sandbox demonstrates correct behavior, but feel free to reach back out if you're unable to get it to work.

Just tested it in my main app with [...catchAll] and no router.refresh() - it works as expected with no issues.

Hi @Neutrlno -- it seems there was still a router.refresh() inside the "to secondary (no refresh)" button in (.)signin/modal.tsx.

I forked your Sandbox here, and added the catch-all, and it seems to work consistently for me:

https://codesandbox.io/p/devbox/fervent-currying-2m7dlz

The router.refresh() method was used because without [...catchAll] I couldn't navigate to the path; only the address bar was changed
I have similar issue open #65144 which is resolved with [...catchAll] approach
Thanks for helping me out!

Copy link
Contributor

github-actions bot commented Jun 5, 2024

This closed issue has been automatically locked because it had no new activity for 2 weeks. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.

@github-actions github-actions bot added the locked label Jun 5, 2024
@github-actions github-actions bot locked as resolved and limited conversation to collaborators Jun 5, 2024
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
bug Issue was opened via the bug report template. locked Parallel & Intercepting Routes Related to Parallel and/or Intercepting routes.
Projects
None yet
Development

No branches or pull requests

4 participants