React报错之useNavigate() may be used only in context of Router

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

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

// App.js
import React from 'react';
import { useNavigate } from 'react-router-dom';

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

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

  return (
    
      Navigate to About
    
  );
}

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

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

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

XFUN

小方智能包装设计平台

下载

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

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

传递给navigate函数的参数与组件上的to属性相同。

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

// App.js
import {useNavigate} from 'react-router-dom';

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

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

  return (
    
      Navigate to About
    
  );
}

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

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

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