在 React 中,要使用 react-router-dom 的 history.push,您需要遵循以下步骤:
react-router-dom
。如果没有,请运行以下命令进行安装:
npm install react-router-dom
或者
yarn add react-router-dom useHistory
钩子:
import { useHistory } from 'react-router-dom';useHistory
钩子创建 history
对象:
const history = useHistory();history.push()
方法导航到新的路由:
const redirectToAnotherPage = () => { history.push('/another-page'); }; 现在,只要调用 redirectToAnotherPage
函数,浏览器就会导航到 /another-page
路由。
这是一个完整的组件示例:
import React from 'react';
import { useHistory } from 'react-router-dom';
const MyComponent = () => {
const history = useHistory();
const redirectToAnotherPage = () => {
history.push('/another-page');
};
return (
<div>
<button onClick={redirectToAnother => redirectToAnotherPage()}>跳转到另一个页面</button>
</div>
);
};
export default MyComponent;
上述代码中,<button>
组件的 onClick
事件调用 redirectToAnotherPage()
函数,从而导航到 /another-page
路由。
领取专属 10元无门槛券
手把手带您无忧上云