React路由，如何理解useLocation钩子?获取当前地址栏URL

create-react-app test
cd test
npm i react-router-dom --save
npm i esno nodemon webpack-cli --save-dev

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import { BrowserRouter as Router } from "react-router-dom";
ReactDOM.createRoot(document.getElementById("root")).render(
  <Router>
    <App />
  </Router>
);

import React from "react";
import {
  BrowserRouter as Router,
  Routes,
  Route,
  useLocation,
  NavLink,
} from "react-router-dom";

const Menu = function () {
  return (
    <>
      <style>{"a{margin:2px;border:1px solid black;text-decoration:none;padding:1px;}"}</style>
      <style>{"a.active{color:red;font-weight:bold;}"}</style>
      <NavLink to="/" state="aaa">Home</NavLink>
      <NavLink to="/post/123?s#n" state="uncle sunan">Post123</NavLink>
      <NavLink to="/post/456?d#s" state="brother sunan">Post456</NavLink>
    </>
  );
};

function App() {
  let location = useLocation();
  console.log(location);
  return (
    <div>
      <Routes>
        <Route path="/" element={<Menu />} />
        <Route path="/post/:id" element={<Menu />} />
      </Routes>
      <br /><br />
      当前path:{location.pathname}<br/>
      当前search:{location.search}<br/>
      当前hash:{location.hash}<br/>
      当前key:{location.key}<br/>
      当前state:{location.state}<br/>
    </div>
  );
}
export default App;

ERROR
useLocation() may be used only in the context of a <Router> component.