反応ルートとは

React ルーティングには次のものが含まれます: 1. ページ ルーティング、「window.location.href='...'history.back()」などのコード; 2. h5 ルーティング、「window.onchange =」などのコードfunction ( ) {console.log(window.location.hash)}"; 3. ハッシュ ルーティング、「history.pushState(...)」などのコード。

このチュートリアルの動作環境: Windows 10 システム、react18.0.0 バージョン、Dell G3 コンピューター。

反応ルートは何ですか?

#React でのルーティング

1. 3 つの一般的なルート

(1) ページ ルーティング

window.location.href='https://www.hao123.com/'
history.back()

(2) h5 ルーティング

window.location = '#hash'
window.onchange = function () {
    console.log(window.location.hash)
}

(3) ハッシュ ルーティング

//推进一个状态
history.pushState('name','title','/path')
//替换一个状态
history.replaceState('name','title','/path')

2. React-Router ルーティングの概要

1. ルーティング メソッド

: h5 routing

: ハッシュ ルーティング

2. ルーティング ルール

: パッケージ コンポーネント

3. Reason オプション

: 前に一致する場合、順番に一致するマッチング問題を解決します。後ろの人たちは一致しません。

例: /path と path/list、path/list は /path の順序で一致しますが、これでは目的の効果は得られません。完全一致を実現するには、まったく同じキーワードを追加してください。完全に一致する必要があります。合わせる。

4. ジャンプ ナビゲーション、タグに相当します

: ジャンプ ページ

: Link

の拡張バージョン

5. 自動ジャンプ

: クリックする必要はありません、実行がこのブロックに到達すると自動的にジャンプします

3. React-Router の使用

1. パッケージをインポートします

yarn add reverse-router-dom

import {BrowserRouter, Route, Link} from "react-router-dom";

2. BrowserRouter パッケージ

<browserrouter>
    <div>
        <route></route>
        <route></route>
    </div>
</browserrouter>

コンポーネントは、ジャンプするルーティング ページを変更するために使用されます。ページの内容は次のとおりです: Home と Detail は 2 つの実際のコンポーネントです
• path: 一致するルーティング ルール
• exact: 一致効果を変更します。追加すると完全一致を意味し、追加しないとあいまい一致を意味します。例:
• path={'/'} は一致を意味します。 http://localhost:3000/、http://localhost:3000/99 の場合、
• path={'/detail/'} は一致しません。 http://localhost: と一致することを意味します。 3000/detail/xxxxxxx 、後者は制限なく、前の一致が成功していればOKです

3. Route

http:// の値を渡しますlocalhost:3000/detail

(1) ルーティング パラメータ値の受け渡し

ルーティング パラメータ

ジャンプパラメータ:

パラメータを受け取る:

this.props.match.params.id

結果を出力

3.直接使用

結果へのアクセス

http://localhost:3000/detail/3

(2) ルーティングパラメータ値の受け渡し

ルーティング パラメータ

>ルート>

ジャンプパラメータ:

パラメータを受け取る:

this.props.location.search

結果を出力

?id=3。自分で解析する必要があります

アクセス結果

http://localhost:3000/detail?id=3

4.ジャンプ原理

Link の to パラメータが Route の path パラメータと一致するとジャンプが実行され、Route のコンポーネントに設定されているコンポーネントへジャンプします。

#オンライン概要の画像がそれをよく表しています:

# 推奨される学習: 「react ビデオ チュートリアル

#」

以上が反応ルートとはの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。