为什么我不能在 React 的 BrowserRouter 中使用 useLocation？

Question

我有一个 react 应用程序，使用 react-router 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'));

<块引用>

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