如何在React类组件的自定义方法中使用react-router实现重定向

• <Redirect> 是React Router提供的声明式组件，只有被放入render函数的返回结果中、被React正常渲染时才会触发重定向逻辑。你在onClick绑定的事件处理函数里返回Redirect组件，这个返回值不会被传递给渲染流程，所以重定向完全不会生效。

方案1：命令式跳转（推荐，适配事件触发场景） #

事件触发的跳转不需要依赖声明式组件，直接调用React Router提供的路由API即可，更简洁高效。

React Router v5 类组件适配 #

v5版本提供withRouter高阶组件，可直接给类组件注入路由相关属性：

1. 引入高阶组件

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

2. 包裹导出你的类组件

// 替换原有导出代码
export default withRouter(你的类组件名)

3. 修改重定向方法

rejoinPrevRoom() {
    console.log("Debug: A");
    console.log(this.state.roomCode);
    // 调用history.push实现跳转
    this.props.history.push(`/room/${this.state.roomCode}`);
}

React Router v6 类组件适配 #

v6版本移除了内置的withRouter，可自行封装高阶组件注入路由API：

1. 封装适配高阶组件

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

function withRouter(Component) {
  function ComponentWithRouterProp(props) {
    const navigate = useNavigate();
    return <Component {...props} navigate={navigate} />;
  }
  return ComponentWithRouterProp;
}

2. 用上述高阶组件包裹导出你的类组件
3. 修改重定向方法

rejoinPrevRoom() {
    console.log("Debug: A");
    console.log(this.state.roomCode);
    // 调用navigate实现跳转
    this.props.navigate(`/room/${this.state.roomCode}`);
}

方案2：声明式跳转（适配状态驱动跳转场景） #

如果希望用声明式组件实现，可通过额外状态标记控制Redirect的渲染：

1. 给state添加重定向标记

state = {
  // 你原有的其他state字段
  shouldRedirect: false
}

2. 修改重定向方法，更新状态标记

rejoinPrevRoom() {
    console.log("Debug: A");
    console.log(this.state.roomCode);
    this.setState({ shouldRedirect: true });
}

3. 在render函数开头判断状态，渲染重定向组件

render() {
  // React Router v5写法
  if (this.state.shouldRedirect) {
    return <Redirect to={`/room/${this.state.roomCode}`} />
  }
  // React Router v6写法替换为：
  // if (this.state.shouldRedirect) {
  //   return <Navigate to={`/room/${this.state.roomCode}`} replace />
  // }

  // 你原有的render逻辑保留
}

提示：如果是按钮点击这类明确的事件触发跳转，优先用方案1，不需要额外维护状态，逻辑更直观。

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