'react-router-dom doesn't work with node express back-end

I am serving my react app as a static website which includes a react-router-dom, at first glance it all look ok but the I get not found if I refresh any of the pages in my app and for it to work again I need to go to the main page.

import express from 'express';
import app from './app';
import path from 'path';

const PORT = process.env.PORT || 5000;

if (process.env.NODE_ENV === 'production') {

  app.use(express.static('client/build'));

  app.get('*', (req, res) => {
    res.sendFile(path.join(__dirname + '/client/build/index.html'));
  });

}

app.listen(PORT, console.log(`Server Started on Port ${PORT}`)!);

...

<MiscProvider>
  <DataProvider>
    <Router>
      <Switch>
        <Route path='/' exact component={Home} />
        <Route path='/create' exact component={create} />
        <Route path='/viewer' exact component={viewer} />
        <Route path='/ready' exact component={ready} />
      </Switch>
    </Router>
  </DatasProvider>
</MiscProvider>


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source