当前位置：首页 > React

react如何进行页面跳转

2026-01-25 15:29:53React

使用 React Router 进行页面跳转

React Router 是 React 生态中最常用的路由管理库，支持声明式和编程式导航。

安装 React Router：

npm install react-router-dom

声明式导航（Link 组件）

使用 <Link> 组件实现页面跳转，类似于 HTML 的 <a> 标签，但不会触发页面刷新。

react如何进行页面跳转

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

function App() {
  return (
    <Link to="/about">跳转到 About 页面</Link>
  );
}

编程式导航（useNavigate Hook）

在函数组件中，可以通过 useNavigate Hook 实现编程式跳转。

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

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

  const handleClick = () => {
    navigate('/about'); // 跳转到 About 页面
    navigate('/about', { replace: true }); // 替换当前历史记录
    navigate(-1); // 返回上一页
  };

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

路由参数传递

跳转时可以传递参数，通过 state 或 URL 参数实现。

react如何进行页面跳转

// 通过 state 传递参数
navigate('/user', { state: { id: 123 } });

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

类组件中的导航

在类组件中，可以通过 withRouter 高阶组件或使用 history 对象。

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

class MyComponent extends React.Component {
  handleClick = () => {
    this.props.history.push('/about');
  };

  render() {
    return <button onClick={this.handleClick}>跳转</button>;
  }
}

export default withRouter(MyComponent);

动态路由匹配

在路由配置中定义动态参数，通过 useParams Hook 获取。

// 路由配置
<Route path="/user/:id" element={<UserPage />} />

// 在 UserPage 组件中获取参数
import { useParams } from 'react-router-dom';

function UserPage() {
  const { id } = useParams();
  return <div>User ID: {id}</div>;
}

重定向

使用 <Navigate> 组件或 navigate 函数实现重定向。

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

function ProtectedRoute() {
  const isAuth = false;
  return isAuth ? <Dashboard /> : <Navigate to="/login" />;
}