Cannot read properties of undefined (reading 'location')

[cjinc121]

function CompatRouter(_ref) {
  let {
    children
  } = _ref;
  let history = useHistory();
  let [state, setState] = useState(() => ({
    location: history.location, ///this line show error 
    action: history.action
  }));
  useLayoutEffect(() => {
    history.listen((location, action) => setState({
      location,
      action
    }));
  }, [history]);
  return /*#__PURE__*/createElement(Router, {
    navigationType: state.action,
    location: state.location,
    navigator: history
  }, /*#__PURE__*/createElement(Routes, null, /*#__PURE__*/createElement(Route, {
    path: "*",
    element: children
  })));
}

I am halfway through implementing the migration from v5 to v6 and facing this error, somebody pls guide me.
the compat router is showing this error

[ryanflorence]

Did you follow the Step 3 in the guide?

import { BrowserRouter } from "react-router-dom";
+import { CompatRouter } from "react-router-dom-v5-compat";

 export function App() {
   return (
     <BrowserRouter>
+      <CompatRouter>
         <Switch>
           <Route path="/" exact component={Home} />
           {/* ... */}
         </Switch>
+      </CompatRouter>
     </BrowserRouter>
   );
 }

This error would likely come from not having a browser router above it.

[mohammadmanzoor8972]

I am also facing the same issue, I am using react18 along with webpack 3.0.
Please assist to resolved

[Lori-Becker]

Also verify that your BrowserRouter import is coming from react-router-dom. I had the same location undefined error in CompatRouter. This was because I tried to combine my imports and was importing BrowserRouter from "react-router-dom-v5-compat". It really has to come from "react-router-dom".

[mohammadmanzoor8972]

I also facing same issue any solution ?

[javivarelakdi]

I have the same error, I´m using HashRouter instead of BrowserRoute, but in both cases Cannot read properties of undefined (reading 'location')