I have a node.js/express server that serves a react website. When I use the "add to home screen" function in chrome (android), the only thing being save is the main url (example.com), not the route (example.com/my-route). When I click on the shortcut, the home page is being opened instead of the page saved.
Other browsers don't have this problem.
Any ideas what the reason might be? Technically the browser should simply save the currently opened URL.
p.s. I push every page to history, so technically there shouldn't be any issues.
Related
I'm making a SPA app with react 18 and Django. I'm having trouble understanding and fixing an issue where after I encounter a 404 and press back, the browser's title changes but doesn't reload the page, even though the URL changes to match the title.
To make it happen, I navigate to the home page, "/". I press a react "Link" to go to "/e" within the SPA. If I press reload on "/e", it works, because I added a path in the django urls.py for "/e" and also a react SPA react router route in my App.js. I then click another link to navigate to "/b". Now that I'm at "/b", which is a a react router route but NOT a django path, and refresh, I get a standard django "natural", non SPA 404.
Pressing browser Back, the title of the "/e" route is correct, and the URL itself of the browser is correct, but the page does not reload my SPA and it stays a 404 page. I do not understand this behavior or know how to fix it.
If I press back one more time, it will THEN reload the spa, and show "/" correctly, then pressing forward forward will get me back to "/b" within the SPA.
What I would like to happen is that pressing back from the 404 will reload "/e" and display it.
I would think it has to do with my routing and cache, but I don't understand how or why. What I think I know is that when I encounter the 404, it wipes my SPA, and there's should be no javascript running, so pressing back should reload my app in my mind. But, it doesn't, it just shows the correct title and URL for "/e" and still the 404 and all the DOM elements remain exactly the same as the 404, there is no load time so pressing back from the natural-backend 404 feels like it's still in the SPA or something, which makes no sense to me.
If anyone has an idea, please let me know. Thank you.
I have a react app that is held on gh-pages. This page has a '/Main' as its home route and a '/le' route which has been linked in the Main. This link, which is styled in the form of a button, works perfectly.
The problem arises when I try to go to the gh-page URL profile.github.io/le(this is the url where the router link takes me to when I click the button) , it takes me to a dead GitHub page. Why am i able to navigate there using router link but not access it directly by the URL.
Navigating within a single page application uses a trick: it replaces the content and modifies the URL (there is an API for that) without causing a full page reload, the server doesn't even notice those kind of navigation. That modified URL's path could be anything, it does not have to correspond to real files.
When trying to directly open such a routed URL though, you are asking the github server to deliver content for that location and it tries to find a file at the given path. When there is no such file, a 404 page is shown instead. The server does not know you actually want to open the entry file and let its internal (react) routing do the actual navigation work.
There is a helper which replaces the 404 page and augments the entry page to get the desired behavior: https://github.com/rafgraph/spa-github-pages
I'm back (Refreshing React with Express server). I am hoping to figure out this issue.
Quick recap: I am trying to refresh my react website. If I go to www.domain.com/about I will get the:
Not Found
The requested URL was not found on this server.
same if I click on the button to get to /about and hit refresh I will get this error.
My goal
To be able to go to my site, click on another page (i.e. domain.com/anotherpage) hit f5 for refresh and get the same page.
I understand:
The problem is that React just changes the URL when I click on my React app button or link to go to a different page. Then when I refresh it looks for www.domain.com/whatever. Since there is nothing for it, it returns 404.
I also know that if I can get my React app to direct all traffic to index.html. React will handle the rest.
What I have tried:
In my previous post, it was suggested to use my hosting site to redirect traffic to index.html. However, my hosting site lets me adjust the DNS for subdomains but nothing after it. (ie. www.subdomain.domain.com works fine but www.domain.com/whatever doesn't) which I expected but I thought I would try.
I do have an express app however, it doesn't serve the files it just waits for a button to be pressed and then does stuff. I don't need to the server to run to have the website up.
I have tried creating a route in express for this and it looks like:
app.get('/*', (req, res) =>{
res.sendFile(path.join(__dirname + '/public/index.html'));
});
I still get the same 404 error with this.
I have also added an index.html to my server. Thinking it needed the .html file to send. (Thought it might be good).
What I don't know
Where does React look for index.html in production? When I look in the build files under asset-manifest.json there is an "index.html": "/index.html" line of code. Is there where it finds the index file? If so, can I change this to go to index.html on every page request?
Obviously I want the user to be able to refresh the page and get back to it. Can someone point me in the right direction?
Thanks in advance!
I've installed Dnn 9.0.2 on my local dev machine, everything installed just fine.
For some reason I get a 404 for the default page '/'.
I've checked the Site Settings to make sure the Home Page is correctly selected, which it is.
I don't see any kind of strange redirects happening in Firebug.
Any other reasons why this might happen?
Edit:
I changed the Site Settings > Home Page to any other random page and logged out. It worked, no 404. Changed it back to Home, 404 returns.
The URL value for each page Home and RandomPage changes to '/' when set to be the home page, but it works for RandomPage and not for Home.
I ended up creating a new page called Home 2 then deleting the original Home page (from the recycle bin as well), renaming Home 2 to Home and then using the new page in Site Settings.
I couldn't find any reason why this might happen.
There are 2 web applications, ours and the other team. The other team's web app is http://otherteam.com and our application is http://myteam.com
On http://otherteam.com webpage, they have an href link pointing to our page which is http://myteam.com/config?lang=en. When our web application(actually Marionette AppRouter's task) receives that kind of route or path, it will parse it and set the language configuration and then we have a code to redirect the user to the final webpage which is http://myteam.com/landingpage
The code that we are using is
Backbone.history.navigate('landingpage', {replace: true});
to redirect the user to the final destination.
Unfortunately, when user clicks Back button of the browser, it doesn't go back to http://otherteam.com. It will go back to http://myteam.com/config?lang=en which is still our own application. What happens is that the Marionette app router will parse it again similar to how I described it above. The user will just be brought back to http://myteam.com/landingpage
So I changed
// Backbone.history.navigate('landingpage', {replace: true})
and now I'm using
history.replaceState({}, '', 'landingpage');
When I click Back button, the url on the top bar beocmes http://myteam.com/config?lang=en, but it doesn't reload our landingpage anymore which is good. However, nothing happens to the page until I click Back button again. After making the second click on the Back button, I'm back to http://otherteam.com which is great but I had to click the Back button twice.
The problem is you are redirecting the user from the /config?lang=en to another page, so when you click back, they land on the previous page and are then redirected back to the landing page again.
The simplest solution here would be for otherteam.com to link to your landing page and pass the params to be consumed there - http://myteam.com/landingpage?lang=en. Redirecting the user multiple time is never a good idea, and almost always unnecessary.
Once you have received the lang config param, it could be an idea to save it to local storage so it can be retrieved wherever it is needed throughout your app.