useLocation() 只能在 Router 组件的上下文中使用

useLocation() may be used only in the context of a Router component

useLocation当我们尝试在 React Router 中的 Router 上下文之外使用 hook 时，会出现错误“useLocation() may be used only in the context of a Router component” 。

要解决该错误，请useLocation仅在 Router 上下文中使用挂钩。

uselocation 只能在路由器的上下文中使用

Router这是一个将 React 应用程序包装在文件中的示例index.js
。

索引.js


import {createRoot} from 'react-dom/client';
import App from './App';
import {BrowserRouter as Router} from 'react-router-dom';

const rootElement = document.getElementById('root');
const root = createRoot(rootElement);

// 👇️ wrap App in Router

root.render(
  <Router>
    <App />
  </Router>
);

现在你可以useLocation在你的App.js文件中使用钩子了。

应用程序.js


import {
  useLocation,
} from 'react-router-dom';

export default function App() {
  const location = useLocation();

  const handleClick = () => {
    console.log(location);
  };

  return (
    <div>
      <button onClick={handleClick}>Log location</button>
    </div>
  );
}

发生错误是因为useLocation挂钩使用了组件提供的上下文Router，因此它必须嵌套在Router.

用组件包装你的 React 应用程序的最佳位置Router是在你的index.js文件中，因为那是你的 React 应用程序的入口点。

一旦你的整个应用程序被一个Router组件包裹起来，你就可以在你的组件中的任何地方使用 React Router 包中的任何钩子。

解决使用Jest测试库报错

如果您在使用 Jest 测试库时遇到错误，解决方案是相同的，您必须将使用钩子的组件包装useLocation在一个
Router.

应用程序测试.js


import {render} from '@testing-library/react';
import App from './App';
import {BrowserRouter as Router} from 'react-router-dom';

// 👇️ wrap component that uses useLocation in Router

test('renders react component', async () => {
  render(
    <Router>
      <App />
    </Router>,
  );

  // your tests...
});

发生错误是因为您在测试中呈现的组件或其子组件之一使用了挂钩useLocation。

您必须将所有使用任何 React Router 钩子的组件包装在一个
Router组件中，因为它们需要访问
Router.

我还写了一篇关于
如何在 React Router 中获取当前 URL 和 Route 的文章。