正文

React页面间跳转新地址全攻略：掌握四种方法，轻松实现单页面应用页面跳转

/0 浏览量
0721

在React单页面应用（SPA）中，页面间的跳转是一个常见的需求。由于SPA的特点是只有一个入口文件，页面跳转通常不涉及页面的完全刷新，而是通过改变URL的hash值或动态路由来实现。下面，我将详细介绍四种实现React页面间跳转的方法。

方法一：使用window.location.href

这是最直接的方法，通过修改window.location.href属性来改变浏览器地址栏的URL，从而实现页面的跳转。

// 跳转到新页面
function goToNewPage() {
  window.location.href = '/new-page';
}

这种方法简单直接，但无法利用React Router等路由库提供的功能。

方法二：使用react-router-dom的<Link>

react-router-dom是React Router在React中的应用库，提供了丰富的路由功能。使用<Link>组件可以方便地实现页面跳转。

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

function App() {
  return (
    <div>
      <h1>首页</h1>
      <Link to="/new-page">跳转到新页面</Link>
    </div>
  );
}

这种方法可以方便地实现页面的跳转，并且可以结合React Router的其它功能，如路由守卫、动态路由等。

方法三：使用react-router-dom的useHistory钩子

useHistory钩子是react-router-dom提供的一个钩子函数，可以用来获取当前路由对象，并调用其push方法来改变路由。

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

function App() {
  const history = useHistory();

  function goToNewPage() {
    history.push('/new-page');
  }

  return (
    <div>
      <h1>首页</h1>
      <button onClick={goToNewPage}>跳转到新页面</button>
    </div>
  );
}

这种方法可以让你在组件内部控制路由跳转，非常适合在组件内部进行页面跳转的场景。

方法四：使用react-router-dom的useNavigate钩子（React Router v6）

在React Router v6中，useNavigate钩子替代了useHistory钩子，提供了更简洁的API。

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

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

  function goToNewPage() {
    navigate('/new-page');
  }

  return (
    <div>
      <h1>首页</h1>
      <button onClick={goToNewPage}>跳转到新页面</button>
    </div>
  );
}

这种方法与useHistory类似，但提供了更简洁的API。

总结

以上四种方法都可以实现React页面间的跳转，具体使用哪种方法取决于你的需求。如果你需要简单的页面跳转，可以使用window.location.href或<Link>组件；如果你需要更丰富的路由功能，可以使用useHistory或useNavigate钩子。希望这篇文章能帮助你轻松实现React页面间的跳转。

-- 展开阅读全文 --