ReactJS与React-Router：按钮onClick路由跳转方法咨询

嘿，这个需求太常见啦！我来给你拆解几种React Router下的实现方式，分版本说清楚，你可以对应自己的项目版本来选：

React Router v6（当前主流版本） #

函数组件：用useNavigate钩子 #

这是v6里最推荐的方式，专门用来处理路由跳转。步骤很简单：

1. 从react-router-dom导入useNavigate钩子
2. 在组件内初始化navigate实例
3. 登录逻辑验证成功后，调用navigate('/')跳转到首页

代码示例：

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

function LoginForm() {
  // 初始化导航实例
  const navigate = useNavigate();

  const handleLogin = async () => {
    // 这里替换成你的实际登录逻辑，比如调用后端API验证账号密码
    const loginSuccess = await fetch('/api/login', {
      method: 'POST',
      body: JSON.stringify({ username: 'xxx', password: 'xxx' })
    }).then(res => res.ok);

    if (loginSuccess) {
      // 登录成功跳转到首页
      navigate('/');
      // 如果你不想让用户通过浏览器回退按钮回到登录页，可以用replace模式
      // navigate('/', { replace: true });
    }
  };

  return (
    <div className="login-form">
      <input type="text" placeholder="用户名" />
      <input type="password" placeholder="密码" />
      {/* 注意这里按钮类型用button，避免默认提交表单的行为 */}
      <button type="button" onClick={handleLogin}>登录</button>
    </div>
  );
}

类组件：用Navigate组件 #

v6里移除了withRouter高阶组件，类组件没法直接拿到路由相关的props，所以可以通过状态控制渲染Navigate组件来实现跳转：

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

class LoginForm extends React.Component {
  state = {
    isLoggedIn: false
  };

  handleLogin = async () => {
    const loginSuccess = await yourLoginApiCall();
    if (loginSuccess) {
      this.setState({ isLoggedIn: true });
    }
  };

  render() {
    // 如果登录成功，渲染Navigate组件跳转首页
    if (this.state.isLoggedIn) {
      return <Navigate to="/" replace={true} />;
    }

    return (
      <div className="login-form">
        <input type="text" placeholder="用户名" />
        <input type="password" placeholder="密码" />
        <button type="button" onClick={this.handleLogin}>登录</button>
      </div>
    );
  }
}

React Router v5（旧版本） #

如果你的项目还在用v5，方式略有不同：

函数组件：用useHistory钩子 #

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

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

  const handleLogin = async () => {
    const loginSuccess = await yourLoginApiCall();
    if (loginSuccess) {
      // 跳转到首页
      history.push('/');
      // 替换历史记录用history.replace('/')
    }
  };

  // 组件内容...
}

类组件：用history props #

如果你的LoginForm是直接被<Route>渲染的路由组件，会自动拿到history props：

class LoginForm extends React.Component {
  handleLogin = async () => {
    const loginSuccess = await yourLoginApiCall();
    if (loginSuccess) {
      this.props.history.push('/');
    }
  };

  // 渲染内容...
}

如果不是路由组件，需要用withRouter高阶组件包裹来注入路由props：

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

class LoginForm extends React.Component {
  // 同上的handleLogin逻辑
}

// 用withRouter包裹后才能拿到history等props
export default withRouter(LoginForm);

额外注意事项 #

• 一定要确保登录逻辑完全成功后再执行跳转，比如API请求返回成功、token存储完成，避免出现跳转后权限验证失败的情况
• 如果用replace模式跳转，登录页会从浏览器历史栈中移除，用户无法通过回退按钮回到登录页，适合登录后不需要再返回登录页的场景
• 记得给登录按钮设置type="button"，不然会触发表单的默认提交行为，可能导致页面刷新

内容的提问来源于stack exchange，提问作者kulls