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.
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 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 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 have used AngularJS in a section of my site (for 2 pages, using routes). When I navigate to one of these pages from a non-Angular page, I just get an empty container in which nothing loads. If now I try to navigate to the other Angular-based page, I have the same problem - nothing loads. I get no Angular errors in the console, no nothing.
However, if I refresh the page, the content will load and then everything will work!
I have made a screen recording of this issue: http://screencast.com/t/y72wrr8iO
How can I fix this?
I had this issue also. I found out that it was caused by a chrome extension (AngularJS Batarang), so removing/disabling the extension helped.
If it works after refreshing it means that it is something with loading order in your site. Check if you have correct order of loading, like:
vendor lbirariers -> your libraries -> (...) -> your controller
also check your dependency injection headers in js files, cause you might skipped something
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