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 获取。