react实现点击跳转页面
在React中实现点击跳转页面可以通过多种方式实现，以下是几种常见的方法：
使用react-router-dom的Link组件
安装react-router-dom库后，可以通过Link组件实现页面跳转，适用于声明式导航。
import { Link } from 'react-router-dom';
function App() {
return (
<Link to="/target-page">跳转到目标页面</Link>
);
}使用useNavigate钩子（React Router v6）
通过useNavigate钩子实现编程式导航，适合在事件处理函数中触发跳转。
import { useNavigate } from 'react-router-dom';
function ButtonComponent() {
const navigate = useNavigate();
const handleClick = () => {
navigate('/target-page');
};
return <button onClick={handleClick}>跳转</button>;
}使用window.location（非React Router场景）
直接操作浏览器API实现跳转，但会触发页面刷新，不推荐在单页应用（SPA）中频繁使用。
function RedirectButton() {
const handleClick = () => {
window.location.href = '/target-page';
};
return <button onClick={handleClick}>跳转</button>;
}使用Navigate组件（条件重定向）
通过条件渲染Navigate组件实现自动跳转，适用于权限校验等场景。
import { Navigate } from 'react-router-dom';
function ProtectedRoute({ isAuthenticated }) {
if (!isAuthenticated) {
return <Navigate to="/login" replace />;
}
return <div>受保护的内容</div>;
}传递状态参数
跳转时可通过state传递数据，目标页面通过useLocation获取。
// 跳转时
navigate('/target-page', { state: { id: 123 } });
// 目标页面中
const location = useLocation();
console.log(location.state.id); // 123注意事项：
- 使用React Router前需正确配置路由（如
BrowserRouter）。 - 编程式导航的
replace参数可控制是否替换历史记录（默认为push）。 - 动态路由参数需在路由配置中定义（如
path="/user/:id"）。
