[FIXED] Intercepting Route works, but only if non-intercepted route is visited first.
Answered
LaytonGB posted this in #help-forum
LaytonGBOP
# FIXED
See bottom of original post for details.
# Original Post
If I visit the pages in the order of
However, if I refresh the page and visit in the order
See attached video and images:
1. Video demonstration of problem.
2. File structure.
3. Interception page.
4. Non-interception page.
5. Layout file.
### Tried
- Restructuring to use
- Removing async code from the interception page.
- Replacing
# Fix
This was an issue caused by left-over files in the
See bottom of original post for details.
# Original Post
If I visit the pages in the order of
root -> root/pokemon/[id] (via entering url in browser) -> back -> root/pokemon/[id] (via clicking a link) then there are no problems.However, if I refresh the page and visit in the order
root -> root/pokemon/[id] (via link) then I get the following error message: Application error: a client-side exception has occurred (see the browser console for more information).
See attached video and images:
1. Video demonstration of problem.
2. File structure.
3. Interception page.
4. Non-interception page.
5. Layout file.
### Tried
- Restructuring to use
root/[id] instead of root/pokemon/[id]- Removing async code from the interception page.
- Replacing
onClick router method (see follow up posts below) with a Link element.# Fix
This was an issue caused by left-over files in the
.next directory. I've now changed the package.json script from next dev to rm -r .next && next dev in order to avoid this issue coming up again.Answered by LaytonGB
Hi, I updated the original post with the solution at the bottom of the post.
# Fix
This was an issue caused by left-over files in the.nextdirectory. I've now changed thepackage.jsonscript fromnext devtorm -r .next && next devin order to avoid this issue coming up again.
4 Replies
LaytonGBOP
### Additional info
In the error message it recommends looking at the error in browser console, which then further redirects to a react url: https://github.com/facebook/react/issues/18178#issuecomment-595846312
My specific stack trace looks like the one in the attached image, and so is not helpful.
In the error message it recommends looking at the error in browser console, which then further redirects to a react url: https://github.com/facebook/react/issues/18178#issuecomment-595846312
My specific stack trace looks like the one in the attached image, and so is not helpful.
LaytonGBOP
### Additional info (again)
In the case that this issue is caused by the nature of the links that are clicked, here's some of the code that is displayed on the
As written in the original post, I have tried replacing that redirect method with a
In the case that this issue is caused by the nature of the links that are clicked, here's some of the code that is displayed on the
root page that contains the links (see image where the redirect code is underlined).As written in the original post, I have tried replacing that redirect method with a
Link element.How did you fix it?
@joulev How did you fix it?
LaytonGBOP
Hi, I updated the original post with the solution at the bottom of the post.
# Fix
This was an issue caused by left-over files in the.nextdirectory. I've now changed thepackage.jsonscript fromnext devtorm -r .next && next devin order to avoid this issue coming up again.
Answer