I am new to React and I've been developing a simple react web app. Now when I have shipped my code to the server I have issues with React Routing, in my case loading different components for different url path returns 404.

To remedy this I have adjusted the server apache conf file to redirect any ErrorDocument 404 to index.html. This is a temporary fix and I would really like to understand and solve this issue moving forward.

I tried to install node on my server (Digital Ocean droplet) but in order to do so I need more resources to allocate which I don't want to do if I don't have to.

Can somebody explain to me what can I do here to resolve the issue I am having.

This project is simple but I want to continue using React and expand to a bigger projects and web app.

Here part of the code that does Routing

import React from 'react';
import Header from './components/Header/Header';
import About from './components/Pages/About/About';
import Home from './components/Pages/Home/Home';
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';

// import Bootstrap from 'react-bootstrap';
import './bootstrap.min.css';
// Default overwrite 
import './app.scss';
// Roboto Font


export default function App() {
  return (
    <>
    <Header />
      <Router>
        <Switch> 
          <Route path="/" exact component={Home}/>
          <Route path="/about" component={About}/>
          <Route path="/#contact" />
        </Switch>
      </Router>
    </>
  )
}

Here my component About is returning 404.

Any help appreciated.