0
404
ViewsReact JS Application links throwing Error 404 on live server but working on localhost
I have this react js app build with create-react-app. I use react-router-dom for the routings. When I visit any link directly e.g url/products it will throw 404 error page. but if I go the that page from the link on the app, it will work directly. But both ways are working perfectly in development. I only get this error on production.
It is hosted on DigitalOcean
This is my app.js settings:
<Router>
<NavBar />
<Switch>
<Route exact path={`${process.env.PUBLIC_URL}/`} component={Home} />
<Route path={`${process.env.PUBLIC_URL}/products`} component={Products} />
<Route path={`${process.env.PUBLIC_URL}/category/:category`} component={Category} />
Kindly help look at what I am doing wrong and suggestion for a fix
3 answers
Answer question0
I am able to fix this. The issue is not with React. It is with DigitalOcean.
I have to set catchall at APP SPEC by doing this
Using Cloud panel UI: Log in and click on App > Settings >> click on component name > scroll down to Custom page > Edit Custom page and select Catchall > Enter index.html in the page name block > Save
0
Add a web.config file with following code-
<?xml version="1.0"?>
<configuration>
<system.webServer>
<rewrite>
<rules>
<rule name="React Routes" stopProcessing="true">
<match url=".*" />
<conditions logicalGrouping="MatchAll">
<add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
<add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
<add input="{REQUEST_URI}" pattern="^/(api)" negate="true" />
</conditions>
<action type="Rewrite" url="/" />
</rule>
</rules>
</rewrite>
</system.webServer>
</configuration>
0
I solved this in DigitalOcean server with react and vite.
Instal on Digital Ocean
- Create a New App on Digital Ocean, make sure that's is an
static site. - When you site it working correctly, test if works on with sub-routes like www.yourweb.com/subrute
Last step: 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.yamlfile - Add
catchall_document: index.html - Test if works on with routes like www.yourweb.com/subrute
- if not: Using Cloud panel UI: Log in and click on App > Settings >> click on component name > scroll down to Custom page > Edit Custom page and select Catchall > Enter index.html in the page name block > Save
Example in
Next: Next.js has a setting that worked for me: innext.config.js, set trailingSlashes: true. This generates the static page layout as /subpage/index.html, which can then be served at /subpage.
Source: APP Platform: App reloading leads to 404 site
I hope, it will serve as a guide to someone who can find a general solution.