Penghalaan tindak balas mempunyai dua mod, iaitu: 1. Mod cincang, yang menambah tanda "#" sebelum laluan untuk menjadi nilai cincang 2. Mod sejarah, yang membolehkan operasi sejarah Sesi pelayar itu telah diakses dalam tab atau bingkai.
Persekitaran pengendalian tutorial ini: Sistem Windows 10, bertindak balas versi 17.0.1, komputer Dell G3.
1 Apa itu
Dalam aplikasi satu halaman, projek web hanya mempunyai satu html. halaman. Setelah halaman dimuatkan, tidak perlu memuat semula atau melompat halaman kerana operasi pengguna adalah seperti berikut:
Tukar URL dan jangan biarkan penyemak imbas menghantar permintaan ke pelayan.
Tukar alamat URL secara dinamik dalam bar alamat penyemak imbas tanpa memuat semula halaman
Ia terbahagi terutamanya kepada dua mod:
mod cincang: tambah selepas url #, seperti http://127.0.0.1:5500/home/#/page1
mod sejarah: membenarkan untuk mengendalikan sejarah sesi penyemak imbas yang telah diakses dalam tab atau bingkai
2 Gunakan
Komponen yang sepadan dengan mod cincang dan mod sejarah Penghala Reaksi ialah:
HashRouter
BrowserRouter
Penggunaan kedua-dua komponen ini sangat mudah, kerana komponen peringkat atas membalut komponen lain, seperti yang ditunjukkan di bawah
// 1.import { BrowserRouter as Router } from "react-router-dom"; // 2.import { HashRouter as Router } from "react-router-dom"; import React from 'react'; import { BrowserRouter as Router, // HashRouter as Router Switch, Route, } from "react-router-dom"; import Home from './pages/Home'; import Login from './pages/Login'; import Backend from './pages/Backend'; import Admin from './pages/Admin'; function App() { return ( <Router> <Route path="/login" component={Login}/> <Route path="/backend" component={Backend}/> <Route path="/admin" component={Admin}/> <Route path="/" component={Home}/> </Router> ); } export default App;
3. Prinsip Pelaksanaan
Penghalaan menerangkan hubungan pemetaan antara URL dan UI Pemetaan ini adalah sehala, iaitu perubahan URL menyebabkan kemas kini UI ( tidak perlu memuat semula halaman) )
Yang berikut menggunakan mod cincang sebagai contoh Menukar nilai cincang tidak akan menyebabkan penyemak imbas menghantar permintaan kepada pelayan tidak akan memuatkan semula halaman
Nilai cincang berubah Mencetuskan peristiwa pertukaran cincang pada objek tetingkap global. Oleh itu, penghalaan mod cincang menggunakan peristiwa pertukaran cincang untuk memantau perubahan dalam URL dan melaksanakan operasi DOM untuk mensimulasikan lompatan halaman
penghala tindak balas juga melaksanakan lompatan laluan berdasarkan ciri ini
Yang berikut menggunakan Analisis dan pengembangan komponen HashRouter:
HashRouter
HashRouter membungkus keseluruhan aplikasi,
memantau nilai cincang melalui window.addEventListener('hashChange', panggil balik) Tukar dan hantar ke komponen bersarangnya
dan kemudian hantar data lokasi kepada komponen turunan melalui konteks, seperti berikut:
import React, { Component } from 'react'; import { Provider } from './context' // 该组件下Api提供给子组件使用 class HashRouter extends Component { constructor() { super() this.state = { location: { pathname: window.location.hash.slice(1) || '/' } } } // url路径变化 改变location componentDidMount() { window.location.hash = window.location.hash || '/' window.addEventListener('hashchange', () => { this.setState({ location: { ...this.state.location, pathname: window.location.hash.slice(1) || '/' } }, () => console.log(this.state.location)) }) } render() { let value = { location: this.state.location } return ( <Provider value={value}> { this.props.children } </Provider> ); } } export default HashRouter;
Penghala
Apa yang dilakukan oleh komponen Penghala adalah untuk memadankan nilai semasa yang dilalui melalui BrowserRouter, laluan yang dihantar melalui prop dan nama laluan yang diluluskan dalam konteks, dan kemudian memutuskan sama ada untuk melaksanakan komponen pemaparan
import React, { Component } from 'react'; import { Consumer } from './context' const { pathToRegexp } = require("path-to-regexp"); class Route extends Component { render() { return ( <Consumer> { state => { console.log(state) let {path, component: Component} = this.props let pathname = state.location.pathname let reg = pathToRegexp(path, [], {end: false}) // 判断当前path是否包含pathname if(pathname.match(reg)) { return <Component></Component> } return null } } </Consumer> ); } } export default Route;
Pembelajaran yang disyorkan: "tutorial video reaksi》
Atas ialah kandungan terperinci Terdapat beberapa mod untuk penghalaan React. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!