React Router not loading assets on nested routes in production

Question

Context

I'm setting up a project where I need to have a nested route "/user/:id" where the id is serves as a parameter that I can pass in.

The Problem

In development mode everything (all components, static assets, etc.) loads properly. However, when I build the react project and serve it in production mode, some of the images are not being loaded and looking for the assets on some nested route off the root domain. (I don't fully understand how react grabs the files to be served, but I've attached images that might give insight into this predicament.) The error in grabbing the assets occur when I visit any site off of the "user" path e.g. /user/234, /user/23, etc.

Below is an

1. image of my "App.tsx" file which shows how I've set up routes
2. the successful load of an asset in a path that's not "/user/"
3. a failed load of assets in production when it loads the image on a path off of "/user/" - e.g. "/user/12".

Thank you!

Answer 1

Turns out that all I needed to do was add <base href="/"> to the head of my index.html file!