React中useLocation钩子报错：需在<Router>上下文使用的解决问询

常见原因 #

• App组件未被RouterProvider真正包裹：很多时候是代码层级搞反了——你可能在App组件内部渲染RouterProvider，但useLocation是在App组件本身调用的，这时候App组件处于Router上下文之外，自然会报错。比如这种错误写法：

// App.js 错误示例
import { useLocation, RouterProvider, createBrowserRouter } from 'react-router-dom';

function App() {
  // 这里调用useLocation时，RouterProvider还没渲染，上下文不存在
  const location = useLocation();
  
  const router = createBrowserRouter([/* 路由配置 */]);
  
  return <RouterProvider router={router} />;
}

• 路由钩子被用在RouterProvider的父/同级组件：任何调用useLocation、useNavigate等路由钩子的组件，必须处于RouterProvider的子组件树中，如果组件在RouterProvider外面，哪怕是App的一部分，都会触发这个错误。

解决方法 #

1. 调整层级，让RouterProvider包裹App组件 #

把RouterProvider移到App外面，确保App作为路由的一个元素被包裹在Router上下文里。修改入口文件（比如index.js）：

// index.js 正确示例
import React from 'react';
import ReactDOM from 'react-dom/client';
import { RouterProvider, createBrowserRouter } from 'react-router-dom';
import App from './App';

// 定义路由配置
const router = createBrowserRouter([
  {
    path: '/',
    element: <App />, // App作为路由元素，处于Router上下文内
  },
  // 其他路由配置...
]);

ReactDOM.createRoot(document.getElementById('root')).render(
  <RouterProvider router={router} />
);

然后在App.js里就可以正常使用useLocation了：

// App.js 正确示例
import { useLocation } from 'react-router-dom';

function App() {
  const location = useLocation(); // 现在处于Router上下文，不会报错
  return (
    <div>当前路径：{location.pathname}</div>
  );
}

export default App;

2. 检查所有使用路由钩子的组件层级 #

逐个确认调用useLocation的组件，确保它们都在RouterProvider的子树中。如果有组件在外部使用这些钩子，要么把组件移到Router上下文内，要么重新规划路由结构。

内容的提问来源于stack exchange，提问作者Aaron Tauro