反応ルートとは-フロントエンドQ&A-php.cn

反応ルートとは

藏色散人

リリース： 2023-01-04 16:46:56

オリジナル

1903 人が閲覧しました

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>

ログイン後にコピー

path: 一致するルーティングルール
exact: 一致効果を変更します。追加すると完全一致を意味し、追加しないとあいまい一致を意味します。例:
path={'/'} は一致を意味します。 http://localhost:3000/、http://localhost:3000/99 の場合、
path={'/detail/'} は一致しません。 http://localhost: と一致することを意味します。 3000/detail/xxxxxxx 、後者は制限なく、前の一致が成功していればOKです

3. Route