I have a simple react app, to get to this app, a user clicks an anchor tag from another page. This is . Let's say this page is http://localhost/index.html
It redirects fine to the react app. Let's say it's on http://localhost/react/simple_app. In this react app, I use React Router, which has a catch all if none of the route matches. It will simply render text "Page Not Found".
When I click back button to get to index.html, both Chrome and Firefox will reload simple_app, WITH the url set to http://localhost/index.html. Obviously this will make simple_app to render "Page Not Found", as the route http://localhost/index.html is not defined in its routes. Once that rendered, the browser will immediately renders the previous page. So on this action the user will see the correctly rendered previous page. Everything seems to be pretty minor so far, just a bit of a flicker when "Page Not Found" briefly rendered then it quickly re renders index.html.
What is not fine is, if I then press "Forward" page on the browser, it will NOT re-render simple_app again. It will simply shows "Page Not Found". My suspicion on this is because briefly it has rendered it prior to moving "backwards" (with the wrong URL), hence browser will load it from cache.
Tried on firefox and chrome, with reactjs. Although this behaviour can be replicated with any JS, but specifically problematic with react router.
Also tried, if I type in the url http://localhost/simple_app, if i click back, it won't do the funky reloading with the wrong URL.
Not sure if any good solution to prevent this from happening.
To help everyone who got here looking for an answer, after a bit of digging and a bit of luck, I found the issue rooted in a library (ruby gem) we used called turbolinks. https://github.com/turbolinks/turbolinks.
This gem, injects javascripts which intercepts various navigation API such as anchor tag and browser back and forward so that it can make as our native application behaves like a Single Page App (without reloads).
So if you encountered similar behaviour, you may not be using Ruby, but check if you are using library that behaves similar to Ruby's Turbolinks. Hope this helps.
Related
As the title suggests, Netlify fails to work properly with react-router-dom.
In RRD, when we specify a router, a link is created with that component under our specified URL. In the localhost, we can check the link. doesn't matter if we're navigating there by clicking a button, or just manually typing the URL in the search bar. it works for both. but one thing I noticed is, when I deploy the build folder on Netlify, the routed link stops working. yes, we can browse to that link by clicking a button on the main page or by some logical <Navigate/>. but if we manually type the routed URL in the search bar, Netlify shows the page doesn't exist. even if we reload the routed link after navigating there, it shows Page Not Found
Now I don't know if this issue is on all servers or if it's just Netlify. Because I use only Netlify.
Here's a demo link where you can check the behaviour
If you click "Go to Second page", it'll navigate you there smoothly. but try reloading Second Page or just manually typing out the URL in the search box
Any suggestion will be appreciated
[NOTE: I haven't attached any of my codes, as it's just a normal use of react-router-dom. but in case you think the solution is in the code, tell me in the comments. I'll edit the question and add em]
I have a <Link> to a certain page on my Next.js website. Upon clicking it, I want the webpage to hard reload after it redirects to the destination page (whether it reloads before or after the redirect is not important). I have tried using router.push as well but a hard refresh does not occur. Any help would be appreciated.
If you want to refresh the page on load use simple anchor tags,
if you want more control over reloading the page,
Refer this:
https://nextjs.org/docs/api-reference/next/router#routerreload
would anybody here know if it's possible to do something like what happens in this screen recording? https://www.dropbox.com/s/snhhbeq8knk5dyc/modal-window-routing.mp4?dl=0
It's about routing a modal window, while keeping the UI underneath intact. Normally I'd say that to achieve this in React router the URL would need to encode both what's behind, and the modal. Maybe with some nesting scheme (e.g. /mainview/settings/general). But Outlook web manages to do so while not reflecting in the URL the view that was present when the modal was fired.
Note in the recording how the URL for the settings modal is the same, regardless of whether you open it from the Drafts or the Sent Items or wherever. However, the view from which you opened is kept rendered, and it's where you go back to when you close the modal.
according to the react-router-dom documentation, the following link lays out the proper way to go about achieving your desired result https://reactrouter.com/web/example/modal-gallery
I have an issue with render from the server. On the first load of the page, the layout goes for a toss. However it is corrected on subsequent renders via navigating the pages. Surprisingly the weired layout also appears on a browser refresh. I have tested it with both Chrome and Microsoft Edge but same problem.
The app was created using standard boilerplate 'create-next-app' and then I just added a few of my pages. See screenshots below
one with the weird screen
and other showing correct render
This actually an issue with CSS injection with SSR for material-ui. Check examples here
Background:
I am using backbone.js & Twitter Bootstrap in my client-end page.
On clicking the logout button on header, a confirmation dialog should open.
The question is that
should I use router such as /logout to change to logoutView ?
If click No in the dialog, how could I show the main content with data before the dialog is opened.
Thanks!
Yes, you can use a router and you should.
First thing to know, is you have to render application's layout before dispatching any route, because the layout is rendered and needed for every action, so it's independant, right ?
Second you create a "logout" route in your router and give it the "#logout" hash, then in your "logout" action you open the modal.
Don't use router for such thing. Just fire the modal directly because:
On changing the router, you are gonna push that to the History. Hitting the browser's back button shouldn't really open a modal window.
URLs should be crafted in a way to be bookmarked. You don't want a URL that would open a popup or a modal window!
It's much simpler just to start the modal than to create a variable to hold the previous view and to fall back to it when clicking No
I have build client-side apps using different MVC frameworks like AngularJS and Backbone.js. Every time I faced the same situation you are talking about and found that the easiest and most accurate way is to just show the modal.
UPDATE
Please watch this. This is Jeremy Ashkenas the author of backbone.js stating exactly your situation about how should URLs be used and weather if they should be used to open a pop up or not.