I have the following problem.
In our Next.JS project we have 3 pages:
/documents => shows all documents
/document/[id]/index.js => shows document page
/document/[id]/edit.js=> shows document edit page
Quite simple so far.
On all these page we use an useDocument hook with router.query.id | props.id (from getServerSideProps) which loads the document with SWR.
This generally works without problems.
But when i open a document page, then go back to the documents list and then try to open a different document in the edit page it correctly shows the browser url with /edit in the end, but somehow shows the document view page and not the edit page. When i refresh, everything works fine and the edit page is opened.
This only happens in production mode and i cannot recreate it locally which is very annoying. In addition, which is very strange, it does not happen, when i open the react dev tools^^
What i found out so far is that sometimes the props.id is still the id of the last document and the router.query.id contains the new document. But still the old document is not shown anymore, but the new one on the wrong page. I also try to switch to always load the document with the router.query.id but that didn't work either.
What i found is that Next.JS has some issues with not refreshing state when switching dynamic pages, but that didn't helped me so far.
Does anyone experienced something similar?
Related
I'm having a weird problem that I originally just dismissed as a development glitch, but now I'm more concerned because It happens every time I refresh the page.
The issue is when I navigate to another page (localhost:3000/otherpage), sometimes it wont render that page at all. The page will turn completely white and have no HTML elements on the page (according to the dev tools inspector). However If I'm on that page and refresh this will always happen. Theses pages are dynamically rendered pages that have logic written that tells them to load a skeleton page while fetching the data, or render an error page if there's a problem with the request. I'm stumped as to why this is happening and have not been able to find anyone else that has experienced this problem yet.
My question is:
Why does this happen? and how can I work around this?
I have a screen recording to better explain whats going on.
(link to unlisted video):
https://youtu.be/mJPp3P4ElsI
The issue i have is that when i click on any page in my menu, it loads and then goes back to the previous page i visited. I contacted my hosting provider and they said there must be some code somewhere inside the website or database. But i know for sure i didnt put any code in there. Does anyone know where i could find this code or where the problem could be?
I already tried changing the permalinks and all, but this didnt work.
I expect the page to just normally load into my browser window without redirecting to the previous page.
URL is: http://www.vandeheg.nl/
From what I can see this is a problem with the JavaScript on the site, as with JS disabled I can access all the pages without issue.
I'd recommend trying with all plugins deactivated, and then if that doesn't solve the issue have a look through your theme code for anything like window.location that might imply a forced JS redirect.
I use Angular 2 (v2.4.4) and by using routerLink I navigate between the components.
This works fine, but if I load the very save component with the very same snapshot parameter (active.snapshot.params) the page won't get loaded again. So, for example if I am on /page/56 and I click on a link here which points to /page/56, the very same link (from a menu or something), the component won't reload. (And things might change in the database since the last load, so the page needs to be reloaded.)
I bypassed it by pointing to /jump/page/56 and the Page 404 controller redirects to /page/56.
This also works fine, but if I navigate back in the browser from /page/56, it will get to /jump/page/56 which directs to /page/56 by the Page 404 controller. So basically I cannot navigate back.
As much as I know, I cannot delete browser history by the HTML5 history API, but how could I go back to the page, which was right before /page/56, just by simply clicking on the back button of the browser?
The solution might be a simple JavaScript trick independent from Angular 2, as it does not actually load a new page just loads a different component and changes the URL. (Also because of this I should not use location.reload() because it will reload Angular 2 and all the depending JS, etc.)
Thank you for your solutions in advance!
you can use skipLocationChange Like :
this.router.navigate(['/jump/page/12'],{skipLocationChange:true});
Seems the only way is to create your own dicrective inherited from [routerLink] to control click handler or just add click handler to current element with managing refresh by yourself.
<a (click)="navigate(['/jump/page/56'])">Navigate</a>
where
navigate(route) {
this.router.navigate(route, {replaceUrl: true});
}
How can develop a single page web app with seamless page load, an example is
http://www.producthunt.com/posts/devicons
from this example use can see the second pages loads to the right and source code and the browser url of the second page changes, however by clicking to the left, the user is back at the first page and the source code and browser url changes.
So basically product hunt uses react router from what I can see from their source code in debugger. That takes care of pretty much everything.
I followed a tutorial that showed how to use angularjs and load json data based on menu slug and show it in the page. The demo is here: https://dl.dropboxusercontent.com/u/28763/angular-tutorial/index.html#/page/home
When I refresh the homepage (https://dl.dropboxusercontent.com/u/28763/angular-tutorial/index.html#/page/home), I get a js error in firebug that notes:
$digest already in progress
or
$rootScope.pages is undefined
This usually happens the time after the initial pages.json load. So if I update the pages.json file, I can hit refresh and see the new data, but if I refresh again I get the error. If you click a menu item, About for example, you will see the About page. Click home and it is there. Refresh the browser and get an error.
Also the page shows where the content should render:
{{page.title}}
{{page.content}}
...rather than the title and content. I am super new to AngularJS and am not finding a reason why this isn't working here consistently.
I have the .otherwise({redirectTo: '/home'}); in there, and it does redirect there, however, the data doesn't always do the same...
If this is due to the pages.json file loading quick enough, how do I go about making sure the file is completely loaded before moving on? Or might there be another reason someone sees?
EDIT:
Here is a Plunker of my setup: http://plnkr.co/edit/8QpsLHhPA58uZnbAHgck?p=preview