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

【问题标题】：Why can't I use useLocation in BrowserRouter in React?为什么我不能在 React 的 BrowserRouter 中使用 useLocation？
【发布时间】：2021-07-02 01:00:21
【问题描述】：

我有一个 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 创建）在浏览器路由器中

【问题讨论】：

您能否分享一下错误的实际含义（作为文本）？
在编辑中添加
你可以分享一个codepen或codesandbox的例子吗？
不知道行不行，之前没创建过codependent，不过这里codepen.io/szisziban/project/editor/ZBmbzd
codepen 示例没有抛出您看到的错误？

标签： javascript reactjs react-router react-router-dom

【解决方案1】：

我猜你是从 react-router 导入 BrowserRouter 而不是版本 6，而 useLocation() 是从版本 6 的 react-router-dom 导入的

【讨论】：

【解决方案2】：

您不能在将路由器或浏览器路由器放入树的同一组件中使用它。

我遇到了类似的问题，将 BrowserRouter 保留在 App.js 中，但将开关和路由移动到了一个单独的“Routes”组件，该组件也使用了 useLocation 钩子。

【讨论】：