React routes gives 404 when trying to hit routes with /:id - reactjs

Question

I inherited a framework for a static website that uses react and react-router-dom for the Routes. We want the website to be able to support dynamic loaded content onto pages via an id.
For example, I have an /articles page that lists all the articles and when you click on one of the listed articles, it opens the url /articles/ABCDEFG and then loads the Article page component and fetches the data for that specific id. This works completely on local dev, however once I deploy to production (hosted as an Azure website application) I get all the pages working except for the ones that have a dynamic URL.
I'm fairly new to react, but from what I've read static react sites can't use the /:id because it requires each page to exist already.
I did a search and tried to remove anything static-related from the server and webconfig.
var express = require('express');
var serveStatic = require('serve-static');
var fallback = require('express-history-api-fallback');
var app = express();
var publicDir = path.resolve(__dirname, '../www');
// app.use('/', serveStatic(publicDir));
//app.use(fallback('index.html', { root: publicDir }));
app.listen(process.env.PORT);
My routes are set up like this
generateRoutes() {
return (
<Switch>
<Route exact path="/" component={Home} />
<Route exact path="/about" component={About} />
<Route exact path="/articles" component={Articles} />
<Route path="/articles/:id" component={Article} />
<Route exact path="/careers" component={Careers} />
<Route exact path="/people" component={People} />
<Route path="/profile/:id" component={Profile} />
</Switch>
);
}
What I want is when I put a url into the address bar such as https://example.com/site/profile/246b9e73-5332-4afb-92b8-be5a061bd908 it renders the profile page with that id.
Instead, I get a 404 saying the page can't be found. I'm not sure if I'm chasing a rabbit hole with the static/dynamic idea but I've spent about 2 days trying to figure out why this isn't working so far and I'm willing to try anything.

Answer 1

The deployment section in create-react-app has already addressed this issue, stating
If you use routers that use the HTML5 pushState history API under the hood (for example, React Router with browserHistory), many static file servers will fail. For example, if you used React Router with a route for /todos/42, the development server will respond to localhost:3000/todos/42 properly, but an Express serving a production build as above will not.
This is because when there is a fresh page load for a /todos/42, the
server looks for the file build/todos/42 and does not find it. The
server needs to be configured to respond to a request to /todos/42 by
serving index.html. For example, we can amend our Express example
above to serve index.html for any unknown paths:
So, the solution for you is to change
app.use('/', serveStatic(publicDir));
to
app.use('/*', serveStatic(publicDir));
Hope this helps