当前位置：首页 > React

react 如何写页面跳转

2026-01-25 01:18:45React

页面跳转的实现方式

在React中实现页面跳转可以通过多种方式，以下是常见的几种方法：

使用React Router的`<Link>`组件

React Router是React生态中最常用的路由库，通过<Link>组件可以实现声明式导航。

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

function App() {
  return (
    <div>
      <Link to="/about">关于我们</Link>
    </div>
  );
}

使用`useNavigate`钩子

React Router v6引入了useNavigate钩子，适用于编程式导航场景。

react 如何写页面跳转

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

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

  const handleClick = () => {
    navigate('/about');
  };

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

使用`window.location`

原生JavaScript方式，会触发页面完全刷新。

function RedirectButton() {
  const redirect = () => {
    window.location.href = '/about';
  };

  return <button onClick={redirect}>原生跳转</button>;
}

使用`<Redirect>`组件

在React Router v5及以下版本可以使用重定向组件。

react 如何写页面跳转

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

function ProtectedPage({ isLoggedIn }) {
  if (!isLoggedIn) {
    return <Redirect to="/login" />;
  }
  return <div>受保护内容</div>;
}

动态路由跳转

传递参数时可以使用以下方式：

// 使用useNavigate传递state
navigate('/user', { state: { id: 123 } });

// 或通过URL参数
navigate('/user/123');

路由配置基础示例

典型的路由配置示例：

import { BrowserRouter, Routes, Route } from 'react-router-dom';

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </BrowserRouter>
  );
}