注释从这开始~
总览
当咱们尝试在react router的Router上下文内部应用useNavigate 钩子时，会产生"useNavigate() may be used only in the context of a Router component"正告。为了解决该问题，只在Router上下文中应用useNavigate 钩子。
上面是一个在index.js文件中将React利用包裹到Router中的例子。
// index.jsimport {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 Routerroot.render( <Router> <App /> </Router>);useNavigate
当初，你能够在App.js文件中应用useNavigate钩子。
// App.jsimport 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外面。
用Router组件包裹你的React应用程序的最佳地位是在你的index.js文件中，因为那是你的React应用程序的入口点。一旦你的整个利用都被Router组件所包裹，你能够随时随地的在组件中应用react router所提供的钩子。
Jest
如果你在应用Jest测试库时遇到谬误，解决办法也是一样的。你必须把应用useNavigate钩子的组件包裹在一个Router中。
// App.test.jsimport {render} from '@testing-library/react';import App from './App';import {BrowserRouter as Router} from 'react-router-dom';// ️ wrap component that uses useNavigate in Routertest('renders react component', async () => { render( <Router> <App /> </Router>, ); // your tests...});useNavigate钩子返回一个函数，让咱们以编程形式进行路由跳转，例如在一个表单提交后。咱们传递给navigate函数的参数与<Link to="/about">组件上的to属性雷同。
replace
如果你想应用相当于history.replace()的办法，请向navigate函数传递一个配置参数。
// App.jsimport {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)就相当于按下了后退按钮。