App returns 404 when deployed to production server

Question

My react app is working fine in local, but when I deploy it to a development server I cannot hit the refresh bar. If I do, it will immediately throw a 404 not found error. I cannot manually navigate using the address bar.

I have tried modifying the .htaccess file in the server. still no luck. I tried tinkering with the router adding browserhistory and stuff and still no luck. I understand this has something to do with client side routing . This is the .htaccess file I'm currently using

Options -MultiViews
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.html [QSA,L]

This is the generic code I'm using in App.js

import React from "react";
import { Switch, Route,Link } from "react-router-dom";
import Backup from "./forms/backup_request/backupRequest";
import Restoration from "./forms/restoration_request/RestorationRequest";
import AssetRequest from "./forms/new_asset_request/AssetRequest";

class App extends React.Component {
render() {
return (
<div>
<Switch>
<Route exact path="/" component={Home} />
<Route path="/backup_request" component={Backup} />
<Route path="/restoration_request" component={Restoration}/>
<Route path="/new_asset_request" component={AssetRequest} />
</div>
</Switch>
)
}
}

This is the error message displayed

Not Found The requested URL /id_request was not found on this server.

Answer 1

fixed it. it was a serverside error. needed configuring on the apache server to accept the .htaccess file.