Javascript 为什么可以'；我不能在React中使用浏览器路由器中的useLocation吗？

我有一个react应用程序，使用react路由器v6作为路由系统。我尝试了几种监听路由更改的方法，因为我每次都要运行一个函数，但我无法让它工作。下面的代码示例，我认为是使用useLocation钩子的预期方式，运行时出现了一个错误，“useLocation只能在路由器的上下文中使用，但我相信BrowserRouter创建了一个路由器，它甚至显示在错误消息中，但我仍然无法使用它。错误可以在屏幕截图中看到

function App() {
    const location = useLocation()
    React.useEffect(() => { console.log(location) }, [location])
    return (
        <Provider store={store}>
                <ThemeProvider theme={theme}>
                    <CssBaseline />
                    <Main />
                </ThemeProvider>
        </Provider>
    )
}

ReactDOM.render(<BrowserRouter><App /></BrowserRouter>, document.getElementById('app'));

函数应用程序（）{
const location=useLocation（）
React.useffect（（）=>{console.log（location）}，[location]）
返回(
)
}
ReactDOM.render(

错误：useLocation（）只能在路由器组件的上下文中使用。
应用程序组件中出现上述错误：
应用程序内
路由器中（由BrowserRouter创建）
在浏览器路由器中

你可以分享错误的真实意思吗（作为文本）？在编辑中添加了它。你可以分享一个codepen，或者codesandbox的例子吗？我不知道它是否有效，我以前从未创建过一个CodeDependent，但是这里的codepen例子没有抛出你看到的错误？