在 React Router 中,使用 history 模式可以实现无刷新地进行路由跳转。其中,push 和 replace 是 history 对象上的两个方法,它们用于导航到新的路由。
下面是它们两个方法的区别:
1.push 方法:
- 功能:将新路由推入历史记录栈,并跳转至新路由。
- 效果:新增一个路由记录并切换到该路由,用户可以通过后退按钮返回到之前的路由。
- 示例代码:
import { useHistory } from 'react-router-dom'; function MyComponent() { const history = useHistory(); const handleClick = () => { history.push('/new-route'); }; return ( <button onClick={handleClick}>Go to New Route</button> ); }
replace 方法:
- 功能:替换当前的路由记录,并跳转至新路由。
- 效果:替换当前的路由记录,而不会添加新的历史记录,因此用户无法通过后退按钮返回到之前的路由。
- 示例代码:
import { useHistory } from 'react-router-dom'; function MyComponent() { const history = useHistory(); const handleClick = () => { history.replace('/new-route'); }; return ( <button onClick={handleClick}>Go to New Route</button> ); }