当前位置：首页 > React

react.js如何跳转页面

2026-03-11 11:38:42React

React.js 页面跳转方法

使用 react-router-dom 的 Link 组件
适用于声明式导航，通常用于按钮或链接跳转。需先安装 react-router-dom 并配置路由。

import { Link } from 'react-router-dom';

function MyComponent() {
  return (
    <Link to="/target-page">跳转到目标页</Link>
  );
}

使用 useNavigate Hook
适用于编程式导航，例如在事件处理函数中跳转。

import { useNavigate } from 'react-router-dom';

function MyComponent() {
  const navigate = useNavigate();

  const handleClick = () => {
    navigate('/target-page'); // 可传对象 { pathname: '/target', state: { data } }
  };

  return <button onClick={handleClick}>跳转</button>;
}

使用 window.location
直接操作浏览器地址栏，但会触发页面刷新，不推荐在单页应用（SPA）中频繁使用。

window.location.href = '/target-page';

使用 Navigate 组件
适用于条件渲染时重定向，例如登录状态检查。

react.js如何跳转页面

import { Navigate } from 'react-router-dom';

function ProtectedPage() {
  const isAuthenticated = false;
  return isAuthenticated ? <div>内容</div> : <Navigate to="/login" />;
}

注意事项

使用 react-router-dom 前需确保项目已配置路由（如 BrowserRouter）。
编程式导航可通过 replace: true 参数替换历史记录（如 navigate('/target', { replace: true })）。
传递状态时，可通过 state 参数（如 navigate('/target', { state: { id: 1 } })），目标页通过 useLocation 获取。