Uncaught Error: useNavigate() may be used only in the context of a <Router> component [react-router-dom 6.4]

Question

For the last couple of hours, I'm trying to figure this out, but no success. This works perfectly fine with react-router-dom 6.3, but as soon as I upgrade to any 6.4 version, I get mentioned error. I already checked, and all my imports are from 'react-router-dom',

The Orders component does contain useNavigate(), but as you can see, HashRouter is the highest it can be. This is my simplified index.tsx and it still does not work.

const container = document.getElementById('root');
if (container) {
  const root = createRoot(container);
  root.render(
    <React.StrictMode>
      <HashRouter>
        <Provider store={store}>
          <ChakraProvider theme={theme}>
            <Routes>
              <Route path='/' element={<Orders />} />
            </Routes>
          </ChakraProvider>
        </Provider>
      </HashRouter>
    </React.StrictMode>,
  );
}

Any ideas?

Answer 1

No idea why, but switching to ViteJs from CRA fixed the problem.