I recently deployed a reactjs website on github pages using the custom domain -https://titanmarket.co.ke/.
The website works as expected but returns a 404 error when you reload a page. Usually, a user would expect the current page to be displayed on refresh.
Any insight on this would be great.
This may answer your question link Reference, Also see this
Super easy solution for Github pages reload 404 error.
in the src/public/ index.js file add this script below to the bottom body:
Index.js
https://github.com/rafgraph/spa-github-pages/blob/gh-pages/index.html
Create a 404.html file in the root directory:
404.html
https://github.com/rafgraph/spa-github-pages/blob/gh-pages/404.html
Read more:
Source:
https://github.com/rafgraph/spa-github-pages
Related
I made a website with React and I used react router for routing, my problem is:
When on a non route page the browser is refreshed, I got the hostgator standard 404 page.
I know why is that and I looking for a solution like at netlify.
At netlify I can use a file named _redericets and the problem is solved.
I'm new in react app development, I just build my practice app and deployed it through Netlify. I can visit my app and everything is fine till I refresh my window. Refreshing the window comes with an error page not found. what should I do to solve this problem?
You may need to look at providing a _redirects file in your root directory. See https://docs.netlify.com/routing/redirects/
For example,
/* /index.html 200
As cra is single page application, you need server setting to redirect everytime to index.html,
You might want to check this link
https://www.netlify.com/blog/2020/04/07/creating-better-more-predictable-redirect-rules-for-spas/
The problem: When i go to any internal root, and press f5, it broke, givin 404. Like for example:
https://josuevalrob.github.io/jeval-web/sign-in. But if I go to the root it works fine: https://josuevalrob.github.io/jeval-web
I don't know how to solve this problem. There is a bunch of documentation about this, and I cant handle it.
This is the github repo: https://github.com/josuevalrob/jeval-web
This is the github Page: https://josuevalrob.github.io/jeval-web
And you can see, the package json have the home key:
"homepage": "https://josuevalrob.github.io/jeval-web",
Also the .env is currently empty, but i can add this:
PUBLIC_URL = "https://josuevalrob.github.io/jeval-web"
Nevertheless, it doesn't work.
I had added the homepage or the public_url, neither work.
Github pages doesn't really support single page applications. Single page applications require a server that serves the same page at every url and then the client renders the appropriate content based on the url. Hence the "single page". Github does not allow you to run server side code, so you can't write a server to serve your index.html at every route.
There is, however, a hack you can use to make this work. When you navigate to a route other than the root url, Github will serve a 404 page as you can see. Github allows you to customize this 404 page. So, you can make the custom 404 page your single page application and then it will be served at every route as required.
This repo explains the required steps to serve your single page as a custom 404 page on Github pages.
Basically it amounts to...
Copy this 404.html page to your repo as is
Add this redirect script to your index.html page
The only drawback is that the url is forced to redirect and quickly flashes the incorrect URL before redirecting. You can see an example of this by refreshing this page. If you want to avoid this, you need to look for hosting somewhere else that allows you to edit server side code and serve your index.html at every route
I had a similar issue with react app. I fixed it by using HashRouter instead of BrowserRouter in App component
My React Apps were working perfectly on Github Pages until a few days ago, now they are all giving me 404 errors.
I'm not sure what to try, I haven't changed anything so I'm not sure why they're suddenly not working.
Here is a link to an example: https://github.com/paulmartin91/WikiSearch
It used to host a wikipedia search page, but now I'm getting the following...
"
404
File not found
The site configured at this address does not contain the requested file.
If this is your site, make sure that the filename case matches the URL.
For root URLs (like http://example.com/) you must provide an index.html file.
Read the full documentation for more information about using GitHub Pages.
GitHub Status — #githubstatus
"
It is working locally.
Thanks!
All fixed, I was using the github url 'https://github.com/paulmartin91/WikiSearch' as the package.json.homepage instead of the gh-pages url.
I finished a React project, but when I deployed it with Github Pages, I have a 404 issue,
The URL of the online project is here : https://versifiction.github.io/api-ratp/
When we go on it, we are redirected on the 404 page that I made with React-Router (component of the routing : https://github.com/Versifiction/api-ratp/blob/master/src/App.js),
I think we are redirected to the 404 because the "/api-ratp" in the URL is not declared in the routes, but if I want to deploy this project with Github Pages I have to use the Github repository name on the URL,
Is there a way to change the basepath of the project or something ?
Someone knows how can I resolve this ? Thank you !
Edit: I solved the issue by adding the prop "basename" to the Router