在 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>
  );
};

Answer 1

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