react中如何做跳转
在React中实现页面跳转有多种方式，以下是常见的方法：
使用React Router的<Link>组件
React Router是React生态中最常用的路由库。通过<Link>组件可以实现声明式导航，无需刷新页面：
import { Link } from 'react-router-dom';
function App() {
return (
<Link to="/about">跳转到About页面</Link>
);
}使用useNavigate钩子
React Router v6推荐使用useNavigate进行编程式导航：
import { useNavigate } from 'react-router-dom';
function MyComponent() {
const navigate = useNavigate();
const handleClick = () => {
navigate('/profile'); // 普通跳转
navigate('/profile', { replace: true }); // 替换当前历史记录
navigate(-1); // 返回上一页
};
return <button onClick={handleClick}>跳转</button>;
}使用window.location
对于非React Router场景或需要完整页面刷新的跳转：
window.location.href = 'https://example.com'; // 完整跳转
window.location.replace('https://example.com'); // 替换当前历史记录使用<a>标签
传统HTML方式的跳转，会导致页面刷新：
<a href="/about">About页面</a>路由重定向
在路由配置中使用<Navigate>组件实现条件重定向：
import { Navigate } from 'react-router-dom';
function PrivateRoute({ isAuthenticated }) {
return isAuthenticated ? <Dashboard /> : <Navigate to="/login" />;
}路由参数传递
跳转时携带参数：
// 通过state传递
navigate('/user', { state: { id: 123 } });
// 通过URL参数传递
navigate('/user/123');选择方法时需考虑：
- 需要SPA体验时使用React Router方案
- 需要SEO或完整刷新时使用
<a>标签或window.location - 需要鉴权控制时使用条件重定向
