以编程方式将用户重定向到另一个页面 ReactJS [重复]答案

【问题标题】：Programatically redirect user to another page ReactJS [duplicate]以编程方式将用户重定向到另一个页面 ReactJS [重复]
【发布时间】：2022-01-27 21:23:56
【问题描述】：

我希望在等待来自服务器 api 的响应时以编程方式将用户重定向到加载页面。我正在尝试在类组件中执行此操作

我得到的代码或多或少是这样的：

class App extends Component { 
    constructor(props){
        super(props);
    }

    handleSubmit = () => {
      useNavigate("/loading")
      }
    }
    render() { 
      return ( 
        <div>
          <button onClick={this.handleSubmit}>
            Upload! 
          </button>
        </div>
      ); 
    } 
  }

export default App;

问题是当我点击“上传！”时没有任何反应。按钮。我读过 useNavigate 不能在类组件中使用，但我不确定如何以不同的方式实现它。

我想我的问题是，如何在类组件中使用 useNavigate？

编辑： 感谢您的回复。我最终决定使用以下步骤将我的代码转换为函数：https://nimblewebdeveloper.com/blog/convert-react-class-to-function-component

它现在就像一个魅力。

【问题讨论】：

标签： javascript reactjs react-router-dom

【解决方案1】：

您的澄清是正确的，useNavigate() 是一个钩子，因此只能在功能组件中使用。我认为作为替代方案，您可以使用withRouter 包装您的App，这是一个允许包装组件访问match、location 和history 对象的HOC。从那里，您可以使用history.push('/loading') 更新位置。

有关history的更多信息，请参阅here。

【讨论】：

OP 很可能使用react-router-dom v6，它消除了路由道具和 withRouter HOC。

【解决方案2】：

你不能使用useNavigate，它是类组件内部的一个反应钩子。

你可以顺便使用react-router-dom，它提供了不同的方式来操作浏览器的url。

【讨论】：

【解决方案3】：

创建一个功能组件作为包装器

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

export const withRouter = (ClassComponent) => {
    const RouterWrapper = (props) => {
        const navigate = useNavigate();

        return (
                <ClassComponent
                    navigate={navigate}
                    {...props}
                />
            );
        };

    return RouterWrapper;
};

然后在你的App.js中，用功能组件包装导出它

import { withRouter } from './wrapper';

class App extends Component {
    constructor(props){
        super(props);
    }

    handleSubmit = () => {
        useNavigate("/loading")
    }

    render() { 
        return ( 
            <div>
                <button onClick={this.handleSubmit}>
                    Upload! 
                </button>
            </div>
        ); 
    } 
}

export default withRouter(App);

【讨论】：