Manage history in react-router-dom v6

Question

How do I manage history in my react project using react-router-dom v6? Currently what is happening is that when the user clicks on the browsers' back button it takes him to the default browsers' page instead of the previous page he visited on the website.

Here's the code

index.tsx

ReactDOM.render(
  <React.StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </React.StrictMode>,
  document.getElementById("root")
);

App.tsx

<ErrorBoundary>
   <Router />
</ErrorBoundary>

Router.tsx

const Router: React.FC = (): JSX.Element => {
  return (
    <Suspense fallback={<Loader loadingText="Loading..." />}>
      <Routes>
        <Route path="" element={<RouteGuard />}>
          <Route path="" element={<Home />} />
        </Route>
        <Route path="*" element={<Error404 />} />
      </Routes>
    </Suspense>
  );
};

Does this help? https://stackoverflow.com/questions/65948671/how-to-go-back-to-previous-route-in-react-router-dom-v6 — Irfanullah Jan, Aug 10 '22 at 12:20
@IrfanullahJan no it doesn't, I already checked it, have been using useNavigate within the website but still got no luck — Diksha Goyal, Aug 10 '22 at 12:24
The browser back button only navigates back in the history stack, so if the previous entry in the history stack is the page the user was on prior to navigating into your app that is where they will go back to. It's the way the back button is intended to work. Is there some (*perceived*) issue you are trying to solve for? What are you trying to accomplish? — Drew Reese, Aug 10 '22 at 20:52

score 1 · Accepted Answer · answered Aug 10 '22 at 12:36

Found the solution, In the navigate { replace: true } was used and as per the documentation

replace: true, the navigation will replace the current entry in the history stack instead of adding a new one.

Hence removing it worked well for me, sorry for the troubles caused and thanks for trying to help

Manage history in react-router-dom v6

1 Answers1