Apakah laluan tindak balas

Penghalaan tindak balas termasuk: 1. Penghalaan halaman, kod seperti "window.location.href='...'history.back()"; 2. h5 routing, kod seperti "window.onchange = fungsi ( ) {console.log(window.location.hash)}"; 3. Hash routing, kod seperti "history.pushState(...)".

Persekitaran pengendalian tutorial ini: Sistem Windows 10, bertindak balas versi 18.0.0, komputer Dell G3.

Apakah laluan tindak balas?

Penghalaan dalam React

1. Tiga laluan biasa

(1) Penghalaan halaman

<.>

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

(2) penghalaan h5

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

(3) penghalaan cincang

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

2. Pengenalan penghalaan React-Router

1. Kaedah penghalaan

: penghalaan h5

: penghalaan cincang

>

: Komponen pakej

3 Pilihan sebab

: Selesaikan masalah padanan, mengikut urutan, jika ia sepadan dengan yang sebelumnya dan yang berikutnya, ia tidak akan sepadan.

Contohnya: /path dan path/list Dalam susunan, laluan/senarai akan sepadan dengan /path, yang tidak boleh mencapai kesan yang diingini untuk mencapai padanan yang lengkap, yang mesti betul-betul sama .

4. Navigasi lompat, bersamaan dengan teg

: lompat halaman

: versi Pautan dipertingkat

5. Lompat automatik

: Tidak perlu klik, ia akan melompat secara automatik apabila melaksanakan blok ini

3 🎜>1. Import pakej

benang tambah react-router-dom

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

2. Pakej BrowserRouter

komponen digunakan untuk mengubah suai halaman penghalaan yang hendak dilompat laluan: padanan peraturan penghalaan

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

tepat: mengubah suai kesan padanan, menambah bermakna padanan tepat, bukan menambah bermakna padanan kabur, contohnya:

• path={'/'} bermaksud padanan: http : //localhost:3000/, jika ia ialah http://localhost:3000/99, ia tidak boleh dipadankan
• path={'/detail/'} bermaksud padanan: http://localhost:3000/ perincian /xxxxxxx, yang berikut tidak terhad dan padanan sebelumnya adalah OK
• 3 Nilai laluan laluan
• http://localhost:3000/detail.

(1) Pemindahan nilai parameter penghalaan

Parameter penghalaan

Parameter lompat:

Terima parameter:

this.props.match.params.id

Hasil cetakan

3. Gunakan terus

untuk mengakses keputusan

http://localhost:3000/detail/3

(2) Nilai parameter penghalaan

Parameter laluan

Parameter lompat:

Terima parameter:

this.props.location.search

Cetak hasil

?id=3. Perlu menghuraikan sendiri

Akses hasil

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

4. Lompat prinsip

Parameter ke Pautan sepadan dengan parameter laluan dalam Laluan, kemudian lompatan dilaksanakan dan melompat ke set komponen dalam komponen dalam Laluan.

Gambar ringkasan dalam talian menerangkannya dengan baik:

Pembelajaran yang disyorkan: "

tutorial video bertindak balas

"

Atas ialah kandungan terperinci Apakah laluan tindak balas. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!