以編程方式將用戶重定向到另一個頁面 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);