react router dom - Reactjs - not reloading the page, instead getting `Not Found` page. how to fix this?

Question

this is my domain https://tantum-pm.com on refresh it works find in local. after upload the site, when i refresh it's not loading the current page. instead getting an error as "404 page not found" how to fix this?

here is my router details :

import React, { Suspense, FC} from "react";
import ReactDOM from "react-dom";
import { BrowserRouter as Router, Route, Redirect, Switch } from "react-router-dom";

import "./styles/layout.scss";
import "./styles/global.scss";
import {Layout } from "./components/layout";

const Home = React.lazy(() => import("./components/page-home/home.component"));
const Aboutus = React.lazy(() => import("./components/page-about-us/about-us.component"));
const WhatWeDo = React.lazy(() => import("./components/page-what-we-do/what-we-do.component"));
const Projects = React.lazy((() => import("./components/page-projects/projects.component")));
const ContactUs = React.lazy(() => import("./components/page-contact-us/contact-us.component"));


const App:FC = () => {
    return (
    
        <Router>
            <Layout>
            <Switch>
                <Suspense fallback={<div>Loading...</div>}>
                    <Redirect exact from="/" to="/home" />
                    <Route path="/home">
                        <Home />
                    </Route>
                    <Route path="/about-us">
                        <Aboutus show={-1} />
                    </Route>
                    <Route path="/what-we-do">
                        <WhatWeDo />
                    </Route>
                    <Route path="/projects">
                        <Projects />
                    </Route>
                    <Route path="/contact-us">
                        <ContactUs />
                    </Route>
                </Suspense>
            </Switch>
            </Layout>
        </Router>

    )
};

ReactDOM.render(<App />, document.getElementById("root"));

what is the change do i required to do here? thanks in advance

I am using react-router-dom": "^5.1.6",

Answer 1

You can change your .htaccess file and insert this

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteCond %{REQUEST_FILENAME} !-l
  RewriteRule . /index.html [L]
</IfModule>

You may also want to check what is .htaccess?