search

Home  >  Q&A  >  body text

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

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

P粉957723124P粉957723124528 days ago465

reply all(1)I'll reply

  • P粉668146636

    P粉6681466362023-09-09 09:15:22

    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:

    reply
    0
  • Cancelreply