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

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

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

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

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

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>
);

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

应用程序.js


import React from 'react';
import {
  useNavigate,
} from 'react-router-dom';

export default function App() {
  const navigate = useNavigate();

  const handleClick = () => {
    // 👇️ navigate programmatically
    navigate('/about');
  };

  return (
    <div>
      <button onClick={handleClick}>Navigate to About</button>
    </div>
  );
}

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

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

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

（开玩笑）useNavigate() 只能在 Router 组件的上下文中使用

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

应用程序测试.js


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

// 👇️ wrap component that uses useNavigate in Router

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

  // your tests...
});

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

钩子useNavigate返回一个函数，让我们以编程方式导航，例如在提交表单之后。

错误是因为我们正在测试的组件或其子组件之一使用了钩子useNavigate。

钩子useNavigate只能在组件内部使用，Router因为它使用提供的上下文Router。

如果您在测试中呈现的任何组件使用了钩子，则必须在测试它们时将它们包装在 a 中。 useNavigateRouter

使用相当于`history.replace()`

我们传递给函数的参数与组件上的 propnavigate相同。to<Link to="/about">

如果要使用该history.replace()方法的等效项，请将
options参数传递给该navigate函数。

应用程序.js


import {useNavigate} from 'react-router-dom';

export default function App() {
  const navigate = useNavigate();

  const handleClick = () => {
    // 👇️ replace set to true
    navigate('/about', {replace: true});
  };

  return (
    <div>
      <button onClick={handleClick}>Navigate to About</button>
    </div>
  );
}

当选项对象上的replace属性设置为时true，历史堆栈中的当前条目将被替换为新条目。

换句话说，导航到新路由不会将新条目推送到历史堆栈中，因此如果用户单击后退按钮，他们将无法导航到上一页。

这很有用，例如，当用户登录时 – 您不希望他们能够单击后退按钮并返回到登录页面。

或者，如果您有一个将用户重定向到不同页面的路由 – 您不希望用户单击后退按钮并再次重定向。

您还可以调用navigate带有增量的函数以返回历史堆栈，例如，navigate(-1)与点击后退按钮相同。

额外资源

您可以通过查看以下教程来了解有关相关主题的更多信息：