当前位置：首页 > React

react点击按钮如何跳转页面

2026-01-25 05:57:25React

使用react-router-dom实现页面跳转

安装react-router-dom库

npm install react-router-dom

在App.js中配置路由

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Home from './Home';
import About from './About';

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

使用useNavigate钩子跳转

在函数组件中使用useNavigate

react点击按钮如何跳转页面

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

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

  return (
    <button onClick={() => navigate('/about')}>
      跳转到关于页面
    </button>
  );
}

使用Link组件跳转

声明式导航方式

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

function Home() {
  return (
    <Link to="/about">
      <button>跳转到关于页面</button>
    </Link>
  );
}

带参数的跳转

传递路由参数

react点击按钮如何跳转页面

const navigate = useNavigate();

navigate('/user/123'); // 路径参数
navigate('/profile', { state: { id: 1 } }); // 状态参数

编程式导航的其他方法

使用history对象跳转

// 在新版本中已不推荐直接使用history
navigate(-1); // 返回上一页
navigate(1); // 前进
navigate('/about', { replace: true }); // 替换当前历史记录

类组件中的跳转方法

使用withRouter高阶组件

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);