React Router：為什麼 useLocation 和 useHistory 可能會返回 undefined

我在使用 React Router 時，使用了 useLocation 和 useHistory hooks 的地方卻都返回了 undefined。這真是讓我感到困惑。

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

結果都返回了 undefined。

後來才發現，我在同一個組件中使用 useLocation 和 useHistory 並在 DOM 中添加 <Router>...</Router>。

然後我找到了這個 issue，解釋說我不能這樣做。

我需要將 <Router>...</Router> 的包裹組件提升一層。在我的情況下，我在 index.js 文件中進行了如下修改：

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

...

ReactDOM.render(
 <React.StrictMode>

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