注释从这开始~
总览
当咱们尝试在 react router 的 Router 上下文内部应用useNavigate
钩子时,会产生 ”useNavigate() may be used only in the context of a Router component” 正告。为了解决该问题,只在 Router 上下文中应用useNavigate
钩子。
上面是一个在 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);
// 👇️ wrap App in Router
root.render(
<Router>
<App />
</Router>
);
useNavigate
当初,你能够在 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 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.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...
});
useNavigate
钩子返回一个函数,让咱们以编程形式进行路由跳转,例如在一个表单提交后。
咱们传递给 navigate
函数的参数与 <Link to="/about">
组件上的 to
属性雷同。
replace
如果你想应用相当于 history.replace()
的办法,请向 navigate
函数传递一个配置参数。
// App.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)
就相当于按下了后退按钮。