以编程方式将用户重定向到另一个页面 ReactJS

Question

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

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

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 不能在 class 组件中使用，但我不确定如何以不同的方式实现它。

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

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

它现在就像一个魅力。

Answer 1

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

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

Answer 2

您不能使用useNavigate ，它是 class 组件内部的反应钩子。

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

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