React JS Application links throwing Error 404 on live server but working on localhost-CodePudding

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

CodePudding user response：

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

CodePudding user response：

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>