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
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 am using a textbook example of React Router v6 on my site according to the docs.
The site already has pre-existing behaviour that utilizes the hash. For example, I have a modal that appends a hash to the URL when it is open. The current behaviour of the site is that when a browser sees that hash, and you press the back button, it will ignore all hashes at the time (even if the hash appends to the browser history)
Go to site.com
Interact and open a modal : site.com#modal
Close modal
Interact and open another modal : site.com#modal2
Check browser history and see 3 different entries from steps 1, 2, and 4
Click the browser back button
Notice that it will take me to the page in history before step 1
But on a page that is using <BrowserRouter>, I observe the following steps:
Follow steps 1-5 above
Click the browser back button
Notice that it take me to the previous hash URL in step 4
Click the browser back button again
Notice that it take me to the URL in step 1
Because this is only happening on the page with <BrowserRouter>, I have to assume that it's overriding that pre-existing behaviour.
How do I get RRv6 to fallback to this desired behaviour? Preferably without altering the existing modal behaviour, which I assume is one way to do this by using location replace instead of appending to the history. Requirements are to retain the <BrowserRouter> and not to swap to <HashRouter>.
My search results are being poisoned by thinking I want to implement a hash router, this is incorrect.
Most similar question I could find
React Router Browser Router with hash fragments combined? - perhaps one solution is checking location.hash and hooking into the popstate event to go back to the base URL if there is a hash. But it seems like a workaround.
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.
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!
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.