react.js如何跳转页面
React.js 页面跳转方法
在 React.js 中实现页面跳转可以通过多种方式，具体取决于项目使用的路由库（如 React Router）或原生方法。
使用 React Router 进行编程式导航
React Router 是 React 生态中最常用的路由库，支持编程式导航：
import { useNavigate } from 'react-router-dom';
function MyComponent() {
const navigate = useNavigate();
const handleClick = () => {
navigate('/target-path'); // 跳转到指定路径
navigate(-1); // 返回上一页
};
return <button onClick={handleClick}>跳转</button>;
}使用 Link 组件声明式导航
对于声明式导航（如点击链接跳转），可以使用 Link 组件：
import { Link } from 'react-router-dom';
function NavBar() {
return (
<Link to="/about">关于页面</Link>
);
}使用重定向（Redirect）
在某些条件下自动跳转时，可以使用 Navigate 组件（React Router v6）：
import { Navigate } from 'react-router-dom';
function ProtectedRoute({ isAuthenticated }) {
return isAuthenticated ? <Dashboard /> : <Navigate to="/login" />;
}原生方法跳转
在不使用路由库的情况下，可以通过原生方法实现跳转：
window.location.href = 'https://example.com'; // 完整 URL 跳转
window.location.replace('/new-path'); // 替换当前历史记录动态路由参数传递
跳转时传递参数：
navigate('/user/123'); // 路径参数
navigate('/profile', { state: { id: 1 } }); // 状态参数注意事项
- 使用 React Router 前需安装：
npm install react-router-dom - 确保应用已包裹
<BrowserRouter>或类似组件 - 编程式导航通常用于表单提交、权限校验后的跳转等场景
- 声明式导航更适合静态链接场景
