当前位置：首页 > React

react是如何跳转的

2026-03-10 20:15:26React

React 中的路由跳转方法

在 React 中实现页面跳转通常依赖路由库，最常用的是 react-router-dom（适用于 Web 应用）。以下是几种核心跳转方式：

使用 `Link` 组件导航

通过 react-router-dom 提供的 Link 组件实现声明式跳转，类似 HTML 的 <a> 标签但不会触发页面刷新：

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

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

编程式导航：`useNavigate` Hook

在函数组件中，通过 useNavigate Hook 实现动态跳转（如提交表单后跳转）：

react是如何跳转的

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

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

  const handleClick = () => {
    navigate('/target-path'); // 跳转到指定路径
    navigate(-1); // 返回上一页
  };

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

路由参数传递

跳转时可通过 URL 参数或状态传递数据：

// 方式1：URL 参数
navigate('/user/123');

// 方式2：通过 state 传递
navigate('/user', { state: { id: 123 } });

目标页面通过 useLocation 获取状态：

react是如何跳转的

const { state } = useLocation();
console.log(state.id); // 123

类组件中的跳转

若使用类组件，可通过 withRouter 高阶组件或 history 对象跳转：

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

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

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

export default withRouter(MyComponent);

路由配置基础

需先设置路由规则（通常在根组件中）：

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

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<HomePage />} />
        <Route path="/target-path" element={<TargetPage />} />
      </Routes>
    </BrowserRouter>
  );
}