React Router-为什么useLocation和useHistory会返回未定义？当我在React Router

当我在React Router中使用useLocation 和useHistory 钩子时，我有一些头疼的时刻。

const history = useHistory()
const location = useLocation()

它们都返回undefined 。

结果发现我在使用useLocation 和useHistory 的同一个组件中，用<Router>...</Router> 把Router添加到DOM中。

然后我发现这个问题，说明我不能这样做。

我必须把我的组件的<Router>...</Router> 包装往上移一级。在我的例子中，我在index.js 文件中这样做了。

import { BrowserRouter as Router } from 'react-router-dom'

...

ReactDOM.render(
  <React.StrictMode>

      <Router>
        <App />
      </Router>
  </React.StrictMode>,
  document.getElementById('root')
)