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
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.
while hosting react web page on GitHub pages it shows only white pages even though I used the instruction on the deployment of react page on Github.
I think it is due to the react-router-dom (Switch and route ) methods I used to redirect to its page. please give me a solution regarding this.
I tried to edit the package.json file but it not be solved and I also tried to push the file again to that repo branch
I'm currently working on a full-stack project mainly using ReactJS and AWS Amplify. I've successfully deployed the website but the URL routings only seem to work if I redirect from the home page. I can only load the home page www.website.com but I try to manually type in www.website.com/login/, it gives me this message
<Error>
<Code>AccessDenied</Code>
<Message>Access Denied</Message>
<RequestId>B2173BDEE0658858</RequestId>
<HostId>
TRevHdaqGZYTUxU9W1wXc3CQccfLeznHlYLcbuF+Wr511FVmOPFBp4tpyccJ2t5QMVpvYygNNb4=
</HostId>
</Error>
I've looked up solutions from other StackOverflow pages but it didn't seem to solve the issue.
I have tried adding a redirect rule in the AWS console provided (Getting 403 ACCESS DENIED error when deploying React Web app on AWS Amplify) but the issue persists. Is there a way to fix this?
You have to set up a 404 (page not found) redirect on the AWS Amplify to point on the index.html.
React App is SPA (Single Page App) it has its own routing, and on the AWS side, all other routes except base path will return 404, because they don't exist on the server-side.
Once you setup 404 to points on your React application again, React router will handle the routing.
Check: docs.aws.amazon.com/amplify/latest/userguide/redirects.html and pay attention to 404 redirections.
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
I have a React app which is created by create-react-app command.
And I also have the blog system which is based on Wordpress.
Directory structure is like this.
*/index.html
/service-workder.js
/manifect.json
/index.html
/favicon.ico
/asset-manifest.json
/static/media
/js
/css
/blog <--------------------- Wordpress*
When I access the URL by http:mydomain/blog/,
Firefox show React page instead of Wordpress page.
Firefox even show React page for http:mydomain/blog/nonexisting ,
which I think is supposed to provide 404 not found from web server.
I was struggling to find a way NOT to let React take wildcard paths.
Safari use React only for index.html, which is good.
Chrome, Firefox use React for entire wildcard paths, even for not existing paths.
http://myserver/ ---> should show React app
http://myserver/nonexistence ---> should show 404 from server
Please help me to figure out isolate React app only for exact index.html.
Thanks in advance.
Like I wrote here, the root cause was service worker which seems to be HTML5 feature to make a web site to a web app.
Unregistering service worker was the solution.