react中如何做跳转
使用 React Router 进行跳转
React Router 是 React 生态中最常用的路由管理库，支持页面跳转和动态路由。以下是几种常见的跳转方式：
安装 React Router
npm install react-router-dom声明式导航（使用 <Link> 组件）
import { Link } from 'react-router-dom';
function App() {
return (
<Link to="/about">跳转到 About 页面</Link>
);
}编程式导航（使用 useNavigate Hook）
import { useNavigate } from 'react-router-dom';
function Home() {
const navigate = useNavigate();
return (
<button onClick={() => navigate('/about')}>跳转</button>
);
}带参数的跳转
navigate('/user/123'); // 动态路由
navigate('/profile', { state: { id: 1 } }); // 隐式传参使用 window.location 跳转
如果需要跳出 React 应用（如跳转到外部链接），可以直接使用原生方法：
window.location.href = 'https://example.com';路由重定向（使用 <Navigate> 组件）
适用于条件跳转（如登录后自动跳转）：
import { Navigate } from 'react-router-dom';
function PrivateRoute({ isLoggedIn }) {
return isLoggedIn ? <Dashboard /> : <Navigate to="/login" />;
}注意事项
- React Router v6 使用
useNavigate替代了旧版的useHistory。 - 动态路由需在路由配置中定义，例如
<Route path="/user/:id" />。 - 通过
state传递的参数在目标页面通过useLocation().state获取。
