React中点击按钮跳转问题：react-router-dom实现无效排查

从你贴的代码片段来看，你用了Redirect组件但没生效，大概率是类组件里的跳转逻辑没踩对正确的姿势，我来给你拆解几个常见的坑和修复方案：

问题1：直接在事件处理器里用Redirect组件不会触发跳转 #

Redirect是React组件，必须被React渲染到DOM树里才会生效。如果你在按钮点击的事件函数里直接return <Redirect to="/xxx" />或者手动创建这个组件，React根本不会去渲染它，自然不会触发跳转。

修复方案：用状态控制Redirect的渲染 #

在你的LoginPage类组件里加个状态，比如shouldRedirect，当登录成功（axios请求完成）后把这个状态设为true，然后在render方法里根据状态渲染Redirect：

class LoginPage extends Component {
  constructor(props) {
    super(props);
    this.state = {
      shouldRedirect: false,
      // 你的其他状态，比如表单输入、加载状态等
    };
  }

  handleLogin = async () => {
    try {
      // 执行你的axios登录请求
      await axios.post('/api/login', { /* 这里传你的表单数据 */ });
      // 登录成功后更新状态，触发Redirect渲染
      this.setState({ shouldRedirect: true });
    } catch (err) {
      // 处理登录失败的情况
      console.error('登录出错啦:', err);
    }
  };

  render() {
    // 如果状态标记需要跳转，直接渲染Redirect组件
    if (this.state.shouldRedirect) {
      return <Redirect to="/dashboard" />;
    }

    return (
      <Fragment>
        <Preloader />
        {/* 你的登录表单 */}
        <button onClick={this.handleLogin}>登录</button>
      </Fragment>
    );
  }
}

问题2：想用history.push但拿不到history对象 #

如果你更习惯用this.props.history.push('/dashboard')这种方式跳转，首先要确保你的LoginPage是被Route组件直接渲染的（比如路由配置里写<Route path="/login" component={LoginPage} />），这样React Router才会自动把history、location这些props注入到组件里。

如果LoginPage是嵌套在其他组件里、没有直接被Route渲染，那你需要用withRouter高阶组件包装它，才能拿到history：

步骤1：导入withRouter #

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

步骤2：用withRouter包装组件（导出时） #

export default withRouter(LoginPage);

步骤3：在事件处理器里直接用history.push #

handleLogin = async () => {
  try {
    await axios.post('/api/login', { /* 表单数据 */ });
    // 直接调用history.push跳转
    this.props.history.push('/dashboard');
  } catch (err) {
    console.error('登录失败:', err);
  }
};

额外检查点 #

• 确保你的整个应用已经被BrowserRouter（或HashRouter）包裹，比如根组件里：

  import { BrowserRouter as Router } from 'react-router-dom';
  
  ReactDOM.render(
    <Router>
      <App />
    </Router>,
    document.getElementById('root')
  );
  

• 检查路由配置，目标路径（比如/dashboard）是否已经在路由表中定义了对应的组件。

这样调整后，你的点击跳转应该就能正常工作了！

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