react router doesn't work for nested paths in S3

Question

I have react-router-dom set up like below:

<Router>
    <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/post/:slug" element={<Post />} />
        // other routes
    </Routes>
</Router>

I have my frontend hosted in an S3 bucket and served through a CloudFront distribution. All of my routes are working except for the "/post/:slug" route. It's weird because if I navigate to a post using the useNavigate hook, it works and loads the post with the correct slug. However, if I reload on the post page or enter the post url directly in the browser (i.e. https://BASE_URL/post/slug/), it just shows a blank page and doesn't seem to be able to identify the route. I'm at a loss because the post route works if I run my frontend locally. It just doesn't work when I deploy with S3 and CloudFront.

For CloudFront host, I forward all paths "*" to my S3 bucket. I also have added an error page to forward to the /index.html root object.

Answer 1

Found the fix! I was missing <base href="/" /> in my index.html file.