I have a NextJs project exported as a static site being hosted on Digital Ocean's App platform, using next/router to handle routing.
The issue is that refreshing on any route outside of the base route "/" throws back a 404. Other answers mention using the error_document or catchall_document in DO's app specification as a fallback file, but the other routes still 404 on refresh and redirect back to that fallback document.
What is the proper way to tell the platform to route to the correct url on refresh?
I had a similar issue, and what solved it was going to my App settings, and on App Spec updating the .yaml file with all my routes.
Where it says
routes:
path: /
Update it with your other routes like:
routes:
path: /
path: /Menu
Solve the App reloading leads to 404 site
Download current app spec from https://cloud.digitalocean.com/apps, in the settings tab you will find App Spec to yourappname.yaml file
Add catchall_document: index.html
Source: APP Platform: App reloading leads to 404 site
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.
The Problem:
We have our website https://website.com and we are trying to deploy a react router application to https://website.com/react-app. Routing works fine if the user first navigates to https://website.com/react-app and then navigates around the app from there. However, if someone navigates to https://website.com/react-app/home directly (or via bookmark) they get a 404 even though /home is one of our routes.
What We tried:
In our package.json we have the "homepage": "/react-app/" set. Using BrowserRouter we set the basename prop to /react-app and the app works when deployed except for 404 when navigating directly to a nested route. We have heard that HashRouter can be useful in this situation, however, when we use HashRouter we are getting https://website.com/react-app#/ instead of https://website.com/react-app/#/.
How can we configure this to allow users to navigate directly to nested routes in our React Router application deployed to a the /react-app Subfolder on our server?
React: 17.0.2, React-Router-Dom: 5.2.0
I think the problem must be not connected with React. Your React app is configured right. Check the configuration of your web server. Your webserver must return index.html with React application when the user navigates to any page.
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
Problem:
I've deployed a React application to our internal cloud at my company. It works with Cloud Foundry. The app works really well, but there's one problem. Whenever I refresh the application and the URL isn't pointing to the root, for example myapp.ourcloud.com/my-route, I get a Error 404 from Nginx.
What I'm using:
The App is a simple React application. No special modules installed beside React Router V4. The Code is pretty simple, I'm using the BrowserRouter, as a child the application. There are only 3 components that ar simply routed with <Link To=.../> and <Route path={.../> ... as said, pretty basic.
What I've tried so far:
I have added a Staticfile in the root directory with pushstate: enabled as stated in the Cloud Foundry documentation.
I just found the answer by myself. I'll post it here for future users:
My manifest.yml file had the following content:
...
path: build/
...
You simply have to put the Staticfile inside the build/ folder from react and not in the project root. Also be careful, the Staticfile gets deleted everytime you build the project.
Serve index.html for all request and then the react router will manage all the routing.
If you however have endpoints or some backend routes you need to access, just make exception for these routes and serve index.html for everything else.
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.