☰

react-router-dom v6 をクラスコンポーネントでナビゲートする方法 質問する

tag-icon • tag-icon javascript reactjs
react-router-dom v6 をクラスコンポーネントでナビゲートする方法 質問する

react-router-dom v6 をインストールし、クラスベースのコンポーネントを使用したいと考えています。 react-router-dom v5 の以前のバージョンでは、this.props.history()何かを実行した後にリダイレクト ページで機能しましたが、このコードは v6 では機能しません。

react-router-dom v6 には関数コンポーネント用のフックがありますuseNavigateが、それをクラス ベース コンポーネントで使用する必要があります。クラス コンポーネントでナビゲートを使用する方法を教えてください。

ベストアンサー1

react-router-dom v6 では、history のサポートは廃止されましたが、その代わりに、navigate が導入されました。特定のイベントが成功したときにユーザーを特定のページにリダイレクトする場合は、以下の手順に従ってください。

という名前のファイルを作成しwithRouter.js、このファイルに以下のコードを貼り付けます。

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

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

ここで、ユーザーを特定のパス/コンポーネントにリダイレクトするクラス ベースのコンポーネントで、上記のwithRouter.jsファイルをインポートし、this.props.navigate('/your_path_here')リダイレクト用の関数を使用します。

ご参考までに、同じことを示すサンプル コードを以下に示します。

import React from 'react';
import {withRouter} from '.your_Path_To_Withrouter_Here/withRouter';

class Your_Component_Name_Here extends React.Component{
    constructor(){
        super()
        this.yourFunctionHere=this.yourFunctionHere.bind(this);
    }

    yourFunctionHere()
    {
        this.props.navigate('/your_path_here')
    }

    render()
    {
        return(
            <div>
              Your Component Code Here 
            </div>
        )
    }
}

export default withRouter(Your_Component_Name_Here);

上記のコードは完璧に動作します。これは単なる小さな拡張機能です。onclick 関数が必要な場合は、次のコードを使用します。

<div className = "row">
    <button className= "btn btn-primary" 
            onClick={this.yourFunctionHere}>RedirectTo</button>
</div>

おすすめ記事