React Router V6 のアップデート

React Router V6 のアップデート

React Router V6 の変更点

私は Router バージョン 5.x を使用していましたが、Router V6 にいくつかの変更が加えられており、ネストされたルートに対してより使いやすいものになっていることに突然気付きました。ここで簡単に紹介させていただきます。

1. < スイッチ > が < ルート > に名前変更されました

従来、Router を使用する場合、Switch でラップする必要がありましたが、これによりルートマッチング (単一マッチング) の効率が向上します。 V6 では、このトップレベル コンポーネントの名前は Routes に変更されますが、機能はほとんど変更されないことに注意してください。

2. <Route>の新機能の変更

コンポーネント/レンダリングは要素に置き換えられます

// v5
<スイッチ>
    <ルート パス="/about" コンポーネント={About}/>
    <ルート パス="/home" コンポーネント={Home}/>
</スイッチ>
//v6
<路線>
    <ルートパス="/about" 要素={<About/>}/>
    <ルートパス="/home" 要素={<Home/>}/>
</ルート>

3. ネストされたルートが簡単に

3.1 具体的な変更点は次のとおりです。

  • <Route children> は子ルートを受け入れるように変更されました。
  • < Route exact > や < Route strict > よりも単純な一致ルール。
  • <ルートパス> パス階層がより明確になりました。
関数App() {
  戻る (
    <ブラウザルーター>
      <路線>
        <ルートパス="/" 要素={<ホーム />}} />
        <ルートパス="/about" 要素={<About/>}>
          <ルート パス="/about/message" 要素 = {<Message/>} />
          <ルートパス="/about/news" 要素={<News/>} />
        </ルート>
      </ルート>
    </ブラウザルーター>
  );
}
関数About() {
  戻る (
    <div>
      <h1>について</h1>
      <Link to="/about/message">メッセージ</Link>
	  <Link to="/about/news">ニュース</Link>
        (*)
       上記で定義されたさまざまなルーティングパラメータに従って、<MyProfile /> または <OthersProfile /> を直接レンダリングします。
        */
      <アウトレット />
    </div>
  )
}

ここでの < Outlet /> はプレースホルダーに相当し、{this.props.children} と非常によく似ており、ますます Vue に似てきています 😎。

3.2 V5 で廃止されたリダイレクト

//v5
<リダイレクト先="/"/>
//v6
<ルートパス="*" 要素={<移動先="/" />}}/>

3.3 複数の < ルート />

以前は、React アプリで使用できるルートは 1 つだけでした。しかし、今では React App で複数のルートを使用できるようになり、異なるルートに基づいて複数のアプリケーション ロジックを管理するのに役立ちます。

'react' から React をインポートします。
'react-router-dom' から Routes, Route をインポートします。
関数ダッシュボード() {
  戻る (
    <div>
      <p>ほら、ルートがもっとあるよ!</p>
      <路線>
        <ルート パス="/" 要素 = {<DashboardGraphs />}} />
        <ルート パス="請求書" 要素 = {<InvoiceList />} />
      </ルート>
    </div>
  );
}
関数App() {
  戻る (
    <路線>
      <ルートパス="/" 要素={<ホーム />}} />
      <ルート パス="dashboard/*" 要素 = {<Dashboard />} />
    </ルート>
  );
}

4. useHistoryの代わりにuseNavigateを使用する

// v5
'react-router-dom' から useHistory をインポートします。
関数MyButton() {
  履歴を useHistory() にします。
  関数handleClick() {
    履歴をプッシュします('/home');
  };
  <button onClick={handleClick}>送信</button>を返します。
};
//v6では、history.push()はnavigation()に置き換えられました
'react-router-dom' から useNavigate をインポートします。
関数MyButton() {
  ナビゲート = useNavigate();
  関数handleClick() {
    ナビゲート('/home');
  };
  <button onClick={handleClick}>送信</button>を返します。
};

history の使用法も次のように置き換えられます。

// v5
履歴をプッシュします('/home');
履歴を置き換えます('/home');
// v6
ナビゲート('/home');
ナビゲート('/home'、{replace: true});

5. Hooksの新しいフックuseRoutesがreact-router-configに置き換わる

関数App() {
  要素をuseRoutes([
    { パス: '/'、要素: <Home /> },
    { パス: 'ダッシュボード'、要素: <ダッシュボード /> },
    { パス: '請求書',
      要素: <請求書 />,
      子供たち: [
        { パス: ':id'、要素: <請求書 /> },
        { パス: 'sent'、要素: <SentInvoices /> }
      ]
    },
    // リダイレクト { パス: 'home', リダイレクト先: '/' },
    // 404 見つかりません { パス: '*'、要素: <NotFound /> }
  ]);
  要素を返します。
}

要約する

この記事はこれで終わりです。皆さんのお役に立てれば幸いです。また、123WORDPRESS.COM のその他のコンテンツにも注目していただければ幸いです。

以下もご興味があるかもしれません:
  • react-router-domV6 におけるルーティングとネストされたルーティングの詳細な説明

<<:  CSS3+JS による虫眼鏡モードの完璧な実装の詳細説明

>>:  MySQLのlike演算子の詳細

推薦する

Centos8 で yum を使用して mongodb 4.2 をインストールする方法

1. リポジトリファイルを作成するmongodb の公式インストール ドキュメントを参照し、次のスク...

MySQL エンコーディング utf8 および utf8mb4 utf8mb4_unicode_ci および utf8mb4_general_ci

参考: MySQL 文字セットの概要utf8mb4 は MySQL 8.0 のデフォルトの文字セット...

JavaScript プロトタイプとプロトタイプチェーンの詳細

目次1. プロトタイプ(明示的なプロトタイプ) 2. __proto__ (暗黙のプロトタイプ) 3...

LinuxにRocketMQインスタンスをインストールする手順

1. JDKをインストールする1.1 現在の仮想マシン環境にJDKがあるかどうかを確認する rpm ...

VMware Workstation 14 Pro は CentOS 7.0 をインストールします

VMware Workstation 14 ProにCentOS 7.0をインストールする具体的な方...

HTML 5 スタイルシートのリセット

この CSS リセットは、Eric Meyers の CSS リセットに基づいて変更されており、特に...

Reactは感情を使ってCSSコードを書く

目次導入:感情のインストール:一般的な CSS コンポーネントを追加します。既存のコンポーネントにス...

Ubuntu での Subversion (SVN) の詳細なインストールと設定

ソフトウェア開発者であれば、Subversion に精通している必要があります。 Subversio...

mysql zipファイルのインストールチュートリアル

この記事では、参考までにMySQL zipファイルをインストールする具体的な方法を紹介します。具体的...

Windows での MySQL 8.0.11 インストール チュートリアル

この記事は、WindowsでのMySQL 8.0.11のインストールチュートリアルを記録しています。...

ウォーターフォールレイアウト+ダイナミックレンダリングの実装

目次典型的なウォーターフォールウェブサイトウォーターフォールフローレイアウトの原則一般的な考え方具体...

MySQL でのテーブルの作成と削除の詳細な例

テーブル作成コマンドには以下が必要です。 テーブルの名前フィールド名各フィールドを定義します(タイ...

MySQLにおける遅いSQLの最適化の方向性について詳しく話しましょう

目次序文SQL文の最適化遅いクエリSQLを記録する設定を変更する方法スロークエリログを表示するSQL...

MYSQLでプロシージャの名前を変更する方法の詳細な説明

最近、ストアド プロシージャの名前を変更する機能を使用しました。インターネットで情報を検索しましたが...