CODEWITHSUNDEEP
javascriptreactjsreact-router-domdigital-ocean
Olusanya Michael
Olusanya Michael

Reputation: 155

React 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

404 Error Page Showing 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

Upvotes: 2

Views: 3873

Answers (3)

JPDevM
JPDevM

Reputation: 121

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.yaml file
  • 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: in next.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.

Upvotes: 0

Vrinda Kansal
Vrinda Kansal

Reputation: 1

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>

Upvotes: 0

Olusanya Michael
Olusanya Michael

Reputation: 155

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

Upvotes: 5

Related Questions