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}/`} ponent={Home} />
        <Route path={`${process.env.PUBLIC_URL}/products`} ponent={Products} />
        <Route path={`${process.env.PUBLIC_URL}/category/:category`} ponent={Category} />

Kindly help look at what I am doing wrong and suggestion for a fix

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}/`} ponent={Home} />
        <Route path={`${process.env.PUBLIC_URL}/products`} ponent={Products} />
        <Route path={`${process.env.PUBLIC_URL}/category/:category`} ponent={Category} />

Kindly help look at what I am doing wrong and suggestion for a fix

• javascript
• reactjs
• react-router-dom
• digital-ocean

• Do you have a proxy set in package.json? – kmp Commented Oct 19, 2021 at 8:35
• No. I didn't set proxy – Olusanya Michael Commented Oct 19, 2021 at 8:42
• Use relative path instead of providing a PUBLIC_URL - reason is that react-router-dom uses localhost as its base and so everything you pass as path is relative to that. If you're in production, react will update its base url with your public url – kmp Commented Oct 19, 2021 at 8:44
• like this? <Route exact path="/products" ponent={Products} /> – Olusanya Michael Commented Oct 19, 2021 at 8:45
• Exactly. If it solved your problem, I'll turn this ment into an answer so you can accept and close the question – kmp Commented Oct 19, 2021 at 8:46

3 Answers 3

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 ponent name > scroll down to Custom page > Edit Custom page and select Catchall > Enter index.html in the page name block > Save

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>

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./subrute

Last step: solve the App reloading leads to 404 site

• Download current app spec from https://cloud.digitalocean./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./subrute
• if not: Using Cloud panel UI: Log in and click on App > Settings >> click on ponent 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.