react如何跳转
路由跳转（React Router）
在React中实现页面跳转通常使用React Router库。以下是几种常见方式：
安装React Router：
npm install react-router-dom声明式导航（推荐）
使用<Link>组件实现跳转，不会触发页面刷新：
import { Link } from 'react-router-dom';
function App() {
return (
<Link to="/about">关于页面</Link>
);
}编程式导航
在事件处理函数中使用useNavigate钩子：
import { useNavigate } from 'react-router-dom';
function HomePage() {
const navigate = useNavigate();
const handleClick = () => {
navigate('/about'); // 普通跳转
navigate('/about', { replace: true }); // 替换当前历史记录
navigate(-1); // 返回上一页
};
return <button onClick={handleClick}>跳转</button>;
}路由参数传递
// 跳转时传递参数
navigate('/user', { state: { id: 123 } });
// 目标组件获取参数
import { useLocation } from 'react-router-dom';
const location = useLocation();
console.log(location.state.id);原生跳转方式
如果需要完全刷新页面的跳转，可以使用原生方法：
window.location.href = 'https://example.com';
// 或
window.open('https://example.com', '_blank');条件跳转
结合路由守卫实现认证跳转：
import { Navigate } from 'react-router-dom';
function PrivateRoute({ children }) {
const isAuth = true; // 实际应从状态管理获取
return isAuth ? children : <Navigate to="/login" />;
}动态路由匹配
配置动态路由参数：
<Route path="/users/:id" element={<UserPage />} />
// 获取参数
import { useParams } from 'react-router-dom';
const { id } = useParams();以上方法覆盖了React中大多数跳转场景，根据具体需求选择合适的方式。React Router v6是目前推荐使用的版本。
