React JS：为什么 useLocation 返回未定义？

Question

我有一个 index.js 包含

ReactDOM.render(
  <Router>
    <App />
  </Router>,
  document.getElementById('root')

App 组件的结构如下：

function App() {
  return (
    <div className="main">
      <Route path="/" exact component={NewGamePopup} />
      <Route path="/game" component={Board} />
    </div>
  );
}

NewGamePopup 是一个弹出窗口，带有一个用于用户输入的文本框和一个带有 Link 的按钮

<Link to={{pathname: "/game", state: {username: username}}}>
    <button className="ui button">
        Create
    </button>
</Link>

用户点击链接后重定向到的 Board 组件

const { location } = useLocation()
console.log(location);

如标题所述，location 未定义。

我已经阅读了几个关于 useLocation 返回 undefined 的问题，但几乎每个人都解决了用 App 包装 Router 组件的问题。在我的情况下，这个解决方案没有改变任何东西。如何让 useLocation 不返回 undefined？