React Routerの歴史について簡単に説明します

React Router を理解したいなら、まず歴史を理解する必要があります。より具体的には、React Router のコア機能を提供するのは history パッケージです。これにより、クライアント側でプロジェクトに位置情報ベースのナビゲーションを簡単に追加できるようになります。これは、シングルページ アプリケーションにとって重要な機能です。

npm インストール --履歴を保存

履歴には、ブラウザ、ハッシュ、メモリの 3 種類があります。 history パッケージは、各タイプの履歴を作成するためのメソッドを提供します。

輸入 {
 ブラウザ履歴を作成、
 ハッシュ履歴を作成、
 メモリ履歴を作成
} 'history' より

React Router を使用すると、履歴オブジェクトが自動的に作成されるため、履歴を直接操作する必要はありません。ただし、プロジェクトでどの履歴を使用するかを決定できるように、さまざまな種類の履歴を理解することは依然として重要です。

歴史とは何でしょうか？

どの履歴を作成しても、ほぼ同じプロパティとメソッドを持つオブジェクトが作成されます。

位置

履歴オブジェクトの最も重要な属性は場所です。場所オブジェクトは、現在のアプリケーションの「場所」を反映します。パス名、検索[注 1]、ハッシュなど、「URL」から派生した属性が含まれます。

さらに、それぞれの場所には固有のキーが関連付けられています。 「キー」は特定の場所を識別し、特定の場所にデータを保存するために使用されます。

最後に、場所には状態を関連付けることができます。これは固定データであり、URL には存在しません。

{
 パス名: '/here',
 検索: '?キー=値',
 ハッシュ: '#追加情報',
 状態: { モーダル: true },
 キー: 'abc123'
}

履歴オブジェクトが作成されるとき、場所を初期化する必要があります。プロセスは履歴の種類によって異なります。たとえば、ブラウザの履歴は現在の URL を解析します。

すべてを統括する一つの場所？

現在の場所にしかアクセスできませんが、履歴オブジェクトは場所のセットを追跡します。場所を追加したり、配列内の任意の場所にアクセスできることから、履歴は「履歴」と呼ばれます。歴史が現在の場所しか記録できない場合、それは「現在」と呼ばれるべきです。

場所のセットに加えて、履歴には現在の対応する場所を指すインデックス値も保存されます。

メモリ履歴の場合は直接定義されます。ブラウザ履歴やハッシュ履歴については、配列やインデックスはブラウザによって制御されており、直接アクセスすることはできません[注2]。

ナビゲーション方法<br /> ナビゲーション方法は、位置属性を持つ履歴システムの仕上げともいえます。ナビゲーションを使用すると、現在の場所を変更できます。

プッシュ方式
プッシュメソッドを使用すると、新しい場所にジャンプできます。現在の場所の後に新しい場所を追加すると、「将来の」場所はすべてクリアされます (現在の場所の後に [戻る] ボタンによって以前に作成された場所)。

デフォルトでは、<Link> をクリックすると、移動するために history.push メソッドが呼び出されます。

history.push({ パス名: '/new-place' })

交換する
replace メソッドは push に似ていますが、場所を追加する代わりに、現在のインデックスの場所を置き換えます。 「将来の」場所はクリアされません。

リダイレクトするときには replace を使用します。これは、React Router の <Redirect> コンポーネントでも使用されているアプローチです。

たとえば、ページ 1 のリンク ボタンをクリックしてページ 2 に移動すると、ページ 2 はページ 3 にリダイレクトされる場合があります。プッシュ方式を使用する場合、「戻る」ボタンをクリックすると、ページ 3 からページ 2 に戻ります (ページ 3 にリダイレクトされる可能性もあります)。置換メソッドを使用すると、ページ 3 からページ 1 が直接返されます。

history.replace({ パス名: '/go-here-instead' })

行け！行け！行け
最後に、「go」には goBack、goForward、go という 3 つのメソッドがあります。
goBack はページの 1 レベルを返します。実際には、履歴のインデックス値が 1 減少します。

履歴に戻る()

goForward は goBack の反対です。 1ページ進みます。これは、「将来の」場所がある場合、つまりユーザーが戻るボタンをクリックした場合にのみ有効になります。

履歴を進む()

go は、goForward と goBack の機能を備えた強力なメソッドです。負の数を渡すと後方に移動し、正の数を渡すと前方に移動します。

歴史.go(-3)

モニター！

オブザーバー モードを使用すると、場所が変更されたときに履歴から通知が送信されます。各履歴オブジェクトには、関数をパラメーターとして受け入れる listen メソッドがあります。この関数は、履歴に保存されているリスナー関数の配列に追加されます。場所が変更されると (コードが履歴メソッドを呼び出したり、ユーザーがブラウザ ボタンをクリックしたりした場合など)、履歴オブジェクトはすべてのリスナー メソッドを呼び出します。これにより、場所が変更されたときに更新するコードを設定できます。

const youAreHere = document.getElementById('youAreHere')
history.listen(関数(場所) {
 youAreHere.textContent = 場所.パス名
})

React Router のルーター コンポーネントは、場所が変更されたときに再レンダリングできるように、履歴オブジェクトをサブスクライブします。

物事を結びつける

各履歴クラスには、場所オブジェクトを受け取って URL を出力する createHref メソッドがあります。
内部的には、履歴は場所オブジェクトを通じてナビゲートされます。ただし、アンカー要素 (a) と同様に、履歴パッケージは認識されず、場所オブジェクトが何であるかも認識されません。生成された HTML を履歴を必要とせずにナビゲートできるようにするため。実際の URL を生成する必要があります。

定数場所 = {
 パス名: '/one-fish',
 検索: '?two=fish',
 ハッシュ: '#red-fish-blue-fish'
}
定数 url = history.createHref(場所)
定数リンク = document.createElement('a')
a.href = URL
// <a href='/one-fish?two=fish#red-fish-blue-fish'></a>

上記は基本的な履歴 API について説明しています。他にも紹介されていないプロパティやメソッドはありますが、上記のメソッドは履歴オブジェクトがどのように動作するかを理解するのに役立ちます。

すべてをまとめる

異なるタイプの履歴には依然として違いがあるため、プロジェクトに適した履歴を選択することを検討する必要があります。
これら 3 つがあれば、あらゆるユースケースをカバーできるはずです。

ブラウザで

ブラウザ環境では、ブラウザ履歴とハッシュ履歴の両方が使用されます。これらは履歴および位置情報 Web API とやり取りするため、現在の位置情報はブラウザのアドレス バーに表示されるものと同じになります。

定数ブラウザ履歴 = ブラウザ履歴を作成します()
定数ハッシュヒストリー = ハッシュヒストリーを作成します()

2 つの最大の違いは、URL から場所を作成する方法です。ブラウザ履歴では完全なURL[注 3]が使用されますが、ハッシュ履歴では最初のハッシュの後のURLの部分のみが使用されます。

// 次のURLを入力してください
url = 'http://www.example.com/this/is/the/path?key=value#hash'
// ブラウザ履歴によって作成された場所オブジェクト:
{
 パス名: '/this/is/the/path',
 検索: '?キー=値',
 ハッシュ: '#ハッシュ'
}
//ハッシュ履歴によって作成された場所オブジェクト:
{
 パス名: 'ハッシュ',
 検索： ''、
 ハッシュ: ''
}

ハッシュの使用

ハッシュ履歴はなぜ必要なのでしょうか?理論的には、URL に移動すると、サーバー上に対応するファイルが存在するはずです。動的配信の場合、要求されたファイルが実際に存在する必要はありません。代わりに、サーバーは要求された URL を調べて、返す HTML を決定します。

ただし、静的ファイル サービスはディスクから直接ファイルを返すことができます。静的配信で実行できる最も動的なことは、URL がディレクトリを指定している場合に、そのディレクトリから index.html ファイルを返すことです。

静的ファイル提供のこの制限のため、最も簡単な解決策[注 4]は、サーバー上の実際の場所を 1 つだけ使用して、ユーザーの取得要求を返すことです。もちろん、場所が 1 つしかないということは、アプリケーションに URL が 1 つしかないことを意味し、履歴は使用できません。この問題を解決するために、ハッシュ履歴は URL のハッシュ化された部分を使用して場所を読み書きします。

// example.com が静的リソース サービスを使用する場合、これら 3 つの URL は同じデータを取得します // /my-site/index.html http://www.example.com/my-site#/one
http://www.example.com/my-site#/two
// ただし、ハッシュ履歴を使用するため、アプリケーション内での 3 つの場所は異なります。
// 場所は URL のハッシュ部分に依存するため { pathname: '/one' }
{ パス名: '/two' }

ハッシュ履歴は適切に機能しますが、すべてのパス情報を URL のハッシュに保存することに依存しているため、ハッキングに対して脆弱であると考えられています。したがって、Web サイトに動的なサービスがない場合にのみ使用することを検討してください。

メモリ: すべての履歴をキャッシュする

メモリ ロケーションを使用することの最大の利点は、JavaScript を使用できる場所であればどこでも使用できることです。

簡単な例としては、Node を実行して単体テストで使用することができます。これにより、ブラウザに依存せずにコードを実行してテストすることができます。

さらに驚くべきは、記憶の履歴をアプリで利用できることです。 react-nativeapp では、 react-router-native はメモリ履歴を使用して位置ベースのナビゲーションを実装します。

必要に応じて、ブラウザでメモリ履歴を使用できます。 (ただし、この方法ではアドレス バーを操作する機能が失われます)。

このメモリ履歴と他の 2 種類の履歴との最大の違いは、独自の場所を維持することです。メモリ履歴を作成するときに、状態を初期化するための情報を渡すことができます。この状態は、場所の配列と現在の場所のインデックスです[注5]。これは、この場所の配列を保存するためにブラウザに依存する他の 2 種類の履歴とは異なります。

定数履歴 = メモリ履歴を作成します({
 初期エントリ: ['/', '/next', '/last'],
 初期インデックス: 0
})

履歴を使用して、比較的面倒でエラーが発生しやすいタスクを処理することは、実証済みのアプローチです。

どちらの履歴タイプを選択しても、どちらも非常に使いやすく、ナビゲーションと位置ベースのレンダリングのための強力な機能を備えています。

注記

[1] 検索プロパティは解析されたオブジェクトではなく文字列です。ほとんどの文字列解析パッケージは使用方法が異なります。そのため、特定の文字列解析パッケージの使用を強制するのではなく、開発者に選択を委ねるようになりました。さらに詳しく知りたい場合は、次の一般的な用語を参照してください: クエリ文字列、クエリ文字列とネイティブ URLSearchParams

[2] これはセキュリティ上の制限です。ブラウザでは、履歴の場所配列には訪問した場所の情報だけが含まれるわけではありません。閲覧がオープンになっていると、ユーザーのブラウザ履歴情報が漏洩してしまうため、アクセスのために開くことはできません。

[3] デフォルトでは、ブラウザ履歴によって作成されるロケーションオブジェクトのパス名はURLのフルパス名です。もちろん、履歴のベース名を指定することもできます。その場合、パス名のこの部分は無視されます。

const history = createBrowserHistory({ ベース名: '/path' })
// パス URL が指定されている場合: http://www.example.com/path/here
// 履歴オブジェクトは次の場所を作成します
{ パス名: '/here', ... }

[4] 理論的には、アプリケーション内のすべての有効なURLが同じHTMLファイルを返すようにすることが可能です。これは問題ありませんが、すべての URL が静的である場合は、冗長なファイルが大量に作成される可能性があります。ただし、任意のアドレスに対して多数の可能性のあるアドレスを一致させるために多数のパラメータを使用することは現実的ではありません。
[5] メモリ履歴初期化場所の配列とインデックスが指定されていない場合は、次のデフォルト値が生成されます。

エントリ = [{ パス名: '/' }]
インデックス = 0

ほとんどのアプリケーションではこれで十分ですが、履歴を事前に書き込むことは、コンテンツを回復するための非常に便利な方法です。

React Router の歴史に関するこの記事はこれで終わりです。React Router の歴史についてさらに詳しく知りたい方は、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続きご覧ください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。