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 具体的な変更点は次のとおりです。
関数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 のその他のコンテンツにも注目していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: CSS3+JS による虫眼鏡モードの完璧な実装の詳細説明
1. リポジトリファイルを作成するmongodb の公式インストール ドキュメントを参照し、次のスク...
参考: MySQL 文字セットの概要utf8mb4 は MySQL 8.0 のデフォルトの文字セット...
1. nginxをダウンロードする [root@localhost my.Shells]# dock...
目次1. プロトタイプ(明示的なプロトタイプ) 2. __proto__ (暗黙のプロトタイプ) 3...
1. JDKをインストールする1.1 現在の仮想マシン環境にJDKがあるかどうかを確認する rpm ...
VMware Workstation 14 ProにCentOS 7.0をインストールする具体的な方...
この CSS リセットは、Eric Meyers の CSS リセットに基づいて変更されており、特に...
目次導入:感情のインストール:一般的な CSS コンポーネントを追加します。既存のコンポーネントにス...
ソフトウェア開発者であれば、Subversion に精通している必要があります。 Subversio...
この記事では、参考までにMySQL zipファイルをインストールする具体的な方法を紹介します。具体的...
この記事は、WindowsでのMySQL 8.0.11のインストールチュートリアルを記録しています。...
目次典型的なウォーターフォールウェブサイトウォーターフォールフローレイアウトの原則一般的な考え方具体...
テーブル作成コマンドには以下が必要です。 テーブルの名前フィールド名各フィールドを定義します(タイ...
目次序文SQL文の最適化遅いクエリSQLを記録する設定を変更する方法スロークエリログを表示するSQL...
最近、ストアド プロシージャの名前を変更する機能を使用しました。インターネットで情報を検索しましたが...