页面之间如何跳转react
在 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="/target-page">跳转到目标页</Link>
);
}编程式导航（使用 useNavigate Hook）：
import { useNavigate } from 'react-router-dom';
function MyComponent() {
const navigate = useNavigate();
return (
<button onClick={() => navigate('/target-page')}>跳转</button>
);
}使用 History API
如果项目未使用 React Router，可以直接操作浏览器 History API。
跳转并添加历史记录：
window.location.href = '/target-page';替换当前历史记录（无后退）：
window.location.replace('/target-page');使用重定向组件
在路由配置中通过 Navigate 组件实现条件跳转：
import { Navigate } from 'react-router-dom';
function ProtectedRoute({ isAuthenticated }) {
return isAuthenticated ? <Dashboard /> : <Navigate to="/login" />;
}路由传参
通过 URL 传递参数（动态路由）：
navigate('/user/123'); // 跳转到动态路由 /user/:id通过 state 传递状态：
navigate('/target-page', { state: { data: 'value' } });目标页面通过 useLocation 获取状态：
const location = useLocation();
console.log(location.state.data); // 输出 'value'注意事项
- 确保路由配置正确（如
<BrowserRouter>包裹根组件）。 - 动态路由需要在路由配置中定义（如
<Route path="/user/:id" />）。 - 编程式导航通常用于事件处理或条件逻辑中。
以上方法覆盖了 React 中页面跳转的主要场景，可根据具体需求选择合适的方式。
