My problem is simple, i am on a page of my app, and when i hit reload / refresh button in the browser, instead of load the same page, it fallback to /home, the strange thing is that at the first moment it try to reload the page, but something happen (no console errors) and fallback to /home.
Just to clarify, let's say i got this site map
I got 3 pages, /home, /title, /title/info
So if i am on /title/info (localhost:3000/#/title/info=123), and hit reload /refresh button, instead of view /title/info it will fallback to /home (localhost:3000/#/home)
I am using the stable version of AngularJS.
So anybody can help me to fix this, because it is driving me nuts.
Thanks in advance.
** EDIT **
This is a link to the app.js file to check if it is ok or not.
http://pastebin.com/0AAuASyZ
If the URL is meant to have a parameter, as in #/title/info=123, you should define the route accordingly: #/title/info=:infoId, otherwise it probably just considers that the route doesn't match anything and go to the default route.
Ok The problem was human after all (like always). Let's say that my coworker code something like:
Every time there is a reload, switch an event ot "change account" and redirect to home... so that was the problem.
So sorry for the inconvinience and I am going to hang up my coworker.
Thanks for everything
Related
In a Next.js project, I am coming across a situation where I get a new URL path from an API. And I have to update that URL path in the browser without reloading that page.
I am doing that with the help of History.pushState()
window.history.pushState(nextState,nextTitle,nextURL);
window.history.replaceState(nextState,nextTitle,nextURL);
With help of History.pushState() I am able to update the URL in the browser without reloading that page. But If after I change that URL multiple times and change to some other page. Then if I start pressing the browser back button, I am not able to get that page with the last URL path showing in the browser.
Only that last URL path shows up in the browser URL input, but that page data is not reflected.
Attaching the sample code and reproducing steps video link below. Any help and suggestions are appreciated.
Source Code
Codesandbox
Reproducing Steps
I am also facing same problem, after using history.pushState() browser back button will not work in that page, because according to browser you never went to that page.
That location doesn't exists in JavaScript history object.
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 been trying to figure out Netlify redirects. My Netlify app is at this link (however this is a blockchain application and requires that you have metamask, so I will try to explain my problem so that you don't have to install it to actually answer my question): rekt.netlify.app
I have two main problems:
I have already tried the whole _redirects file with /* /index.html 200 in it. This works when I go to rekt.netlify.app/games and refresh, it will actually come back to that page. That's good. The issue is when I then go to rekt.netlify.app/games/Valorant for example, it will be a white page on refresh, and I cannot figure out why. In my react application, I have react router set up so the path is path="/games/:game"
I went to the Networks tab in the google inspect and I found that this was the request URL when I refresh the page on /games/Valorant: https://rekt.netlify.app/games/static/css/2.80dce9aa.chunk.css
As you can see, the issue is probably something to do with that /games/ comes before /static/ in the URL. I'm a beginner so I don't know what that actually means.
The second issue I am having is that, the img tags of the games load on the /games page, however, when you click on a specific game and attempt to go to a /games/Valorant for example the image will not load. I believe this is due to a similar problem. I have gone into Network tab of google inspect and when I look at the image being loaded in the /games page, it attempts to GET https://rekt.netlify.app/static/media/league_wallpaper.f5e6bf5f.jpg which works. However, when being loaded in the /games/Valorant page, it attempts to GET https://rekt.netlify.app/games/static/media/league_wallpaper.f5e6bf5f.jpg and this does not work, it's a blank page.
You can notice that the second link there has /games/ in it which I believe is preventing it from getting the image. Potentially the problem here is that anything more than one / in the URL is messing things up? I'm not sure. This is the link to my github project: https://github.com/jacob-tucker/ReKt
Edit: Here are some screenshots that will hopefully help. This first one shows that the request URL is trying to get the image from /games/static (which I don't think makes sense). This is happening on the /games/Valorant page.
And then here is a screenshot of /games/Valorant trying to load as well after I refresh the page and get a blank white screen (it returns a status code of 200 because I have /* /index.html 200 in my _redirects file.
I had a the same issue a while ago, I've just added
"homepage": "https://my-app.netlify.app",
in package.json and it worked perfectly.
I want to route my parent application with sub-application in the project folder
So I notice the URL Changes but didn't display the page I navigate to
Case of study of the issue m facing
Localhost4020/Super
If I want to navigate to Login
The URL change to Localhost4020/Super/Login
But the login page won't show
Check first your Login page code. Probably you have some errors causing the page don't showed. Although your code is compiled you may have errors only showed in the console of your browser: try F12 to show it...
Have you added <router-outlet></router-outlet> in your component file? If yes then pls share your code.
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!