Rumah > hujung hadapan web > Soal Jawab bahagian hadapan > Terdapat beberapa mod untuk penghalaan React

Terdapat beberapa mod untuk penghalaan React

WBOY
Lepaskan: 2022-04-19 10:06:01
asal
5170 orang telah melayarinya

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.

Terdapat beberapa mod untuk penghalaan React

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

Penghalaan tindak balas

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;
Salin selepas log masuk

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 &#39;react&#39;;
import { Provider } from &#39;./context&#39;
// 该组件下Api提供给子组件使用
class HashRouter extends Component {
  constructor() {
    super()
    this.state = {
      location: {
        pathname: window.location.hash.slice(1) || &#39;/&#39;
      }
    }
  }
  // url路径变化 改变location
  componentDidMount() {
    window.location.hash = window.location.hash || &#39;/&#39;
    window.addEventListener(&#39;hashchange&#39;, () => {
      this.setState({
        location: {
          ...this.state.location,
          pathname: window.location.hash.slice(1) || &#39;/&#39;
        }
      }, () => console.log(this.state.location))
    })
  }
  render() {
    let value = {
      location: this.state.location
    }
    return (
      <Provider value={value}>
        {
          this.props.children
        }
      </Provider>
    );
  }
}
 
export default HashRouter;
Salin selepas log masuk

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 &#39;react&#39;;
import { Consumer } from &#39;./context&#39;
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;
Salin selepas log masuk

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!

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan