Terdapat beberapa mod untuk penghalaan React

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.

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;

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!