It is valid in the local environment, but refreshing after deployment is invalid.

Question

I'm using react-router-dom. After deployment, if I refresh the application, the application fails to work, throwing an error Not found, but runs fine in the local environment. This happens for every route.

<Routes>
  <Route path="/" exact element= {<Navigate to="/posts" />} />
  <Route path="/posts" exact element={<Home />} />
  <Route path="/posts/search" exact element={<Home />} />
  <Route path="/posts/:id" element={<PostDetails />} />
  <Route path="/auth" exact element={<Auth />} />
</Routes>

What went wrong and how to solve it. Is it because react-router-dom is not used correctly so it cannot work?

This is the deployed application link: Memories-app

Answer 1

This error will appear wherever you try to access any route individually. This error occurs because render is looking for file /posts that does not exist. For your case, you can solve it by adding the following redirect/rewrite rules: