React router not working on live production

Question

I have built a UI amazon-clone with create-react-app it only shows dummy data. the problem is after publishing it to Vercel, the routing not working as expected! after clicking the links you see a blank page "URL params are correct", you have to manually reload the page to work! also if you clicked a button no event trigger and you get a blank page!

I wrapped all my routes to MainRoute Component:

const MainRoute = withRouter(({ location }) => {
return (
<>
  {location.pathname !== "/login" && location.pathname !== "/signup" ? (
    <Header />
  ) : null}
  <Switch>
    <Route exact path="/" render={() => <Home />} />
    <Route exact path="/products" render={() => <Products />} />
    <Route
      exact
      path="/products/:productID"
      render={() => <ProductPage />}
    />
    <Route path="/checkout" render={() => <Checkout />} />
    <Route path="/payment" render={() => <Payment />} />
    <Route path="/login" render={() => <Login />} />
    <Route path="/signup" render={() => <Signup />} />

    <Route render={() => <NotFoundPage />} />
  </Switch>
  {location.pathname !== "/login" && location.pathname !== "/signup" ? (
    <Footer />
   ) : null}
 </>
 );
});

 export default withRouter(MainRoute);

my App Component:

function App() {

return (
 <div className="app_wrapper">
  <Router>
    <MainRoute />
  </Router>
  </div>
 );
 }

export default App;

repo https://github.com/aseelban/amazon-clone-app link: https://amazon-clone-app-llyl1tfcn.vercel.app/

Answer 1

Thanks, everyone for the help. I solved this problem by removing HOC withStyles and instead use react-jss.

Answer 2

it works correctly (under Brave browser) the authentication routes, could you please specify which route the issue occurs.!