react如何设置返回页面
在 React 中设置返回页面
使用 react-router-dom 的 useNavigate 钩子实现返回功能：
import { useNavigate } from 'react-router-dom';
function BackButton() {
const navigate = useNavigate();
return (
<button onClick={() => navigate(-1)}>
返回上一页
</button>
);
}自定义返回路径
如果需要返回指定路由而非浏览器历史记录：
navigate('/home'); // 返回首页
navigate('/previous-page'); // 返回指定路径浏览器原生实现
使用 window.history API 实现原生返回：
function goBack() {
window.history.back();
}带状态返回
通过路由状态传递参数：
navigate(-1, { state: { from: 'current-page' } });注意事项
- 在组件顶层调用钩子，遵守 React 规则
- 检查历史记录是否存在，避免空历史栈错误
- 考虑使用
<Link>组件替代按钮实现导航
以上方法适用于 React 16.8+ 版本，需确保项目已安装 react-router-dom v6+。
