React报错之useN*igate() may be used only in context of Router

在react中，当我们试图在react router的router上下文之外使用usen*igate钩子时，会出现"usen*igate() may be used only in the context of a router component"的警告。为了解决这个问题，我们需要确保usen*igate钩子仅在router上下文中使用。

下面是一个在index.js文件中将React应用包裹在Router中的示例。

// index.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);

// 将App组件包裹在Router中
root.render(
  <Router>
    <App />
  </Router>
);

现在，您可以在App.js文件中使用useN*igate钩子。

// App.js
import React from 'react';
import { useN*igate } from 'react-router-dom';

export default function App() {
  const n*igate = useN*igate();

  const handleClick = () => {
    // 以编程方式导航
    n*igate('/about');
  };

  return (
    <button onClick={handleClick}>
      N*igate to About
    </button>
  );
}

出现错误的原因是useN*igate钩子依赖于Router组件提供的上下文，因此必须嵌套在Router内。

一旦您的整个应用被Router组件包裹，您可以在任何组件中使用React Router提供的钩子。

如果您在使用Jest测试库时遇到此错误，解决方法也是一样的。您需要将使用useN*igate钩子的组件包裹在一个Router中。

腾讯云AI代码助手

基于混元代码大模型的AI辅助编码工具

205 查看详情

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

// 将使用useN*igate的组件包裹在Router中
test('renders react component', async () => {
  render(
    <Router>
      <App />
    </Router>,
  );
  // 您的测试...
});

传递给n*igate函数的参数与<link to="/about">组件上的to属性相同。

如果您想使用相当于history.replace()的方法，请向n*igate函数传递一个配置对象。

// App.js
import {useN*igate} from 'react-router-dom';

export default function App() {
  const n*igate = useN*igate();

  const handleClick = () => {
    // 将replace设置为true
    n*igate('/about', {replace: true});
  };

  return (
    <button onClick={handleClick}>
      N*igate to About
    </button>
  );
}

当在配置对象中将replace属性的值设置为true时，浏览器历史堆栈中的当前条目会被新的条目所替换。

这在某些情况下非常有用。例如，当用户登录后，您不希望用户通过点击后退按钮再次回到登录页面。或者，当一个路由需要重定向到另一个页面时，您不希望用户通过点击后退按钮再次触发重定向。

您也可以使用数值调用n*igate函数，以实现从历史堆栈中回退的效果。例如，n*igate(-1)相当于按下了后退按钮。

以上就是React报错之useN*igate() may be used only in context of Router的详细内容，更多请关注其它相关文章！