Erfahren Sie in fünf Minuten mehr über React Routing

// Mechanismus zur Komponentenaktualisierung:
// Solange die übergeordnete Komponente neu gerendert wird, werden auch alle Komponentenunterbäume aktualisiert // Leistungsoptimierung // 1. Status reduzieren

// 2. Unnötiges erneutes Rendern vermeiden (Leistungsoptimierung)
// sollteComponentUpdate(nextProps, nextState) { .... }
// Die Hook-Funktion gibt einen Booleschen Wert zurück, „true“ zum Aktualisieren und „false“ zum Nichtaktualisieren // Eine manuelle Implementierung ist möglich, aber zu mühsam // 3. Die eigentliche offizielle Website bietet eine reine Komponente, die die shouldComponentUpdate-Logik bereits für Sie implementiert hat // Sie hilft Ihnen beim Vergleichen von Props und Status, um zu entscheiden, ob eine Aktualisierung durchgeführt werden soll // Gewöhnliche Komponente: class App extends React.Component
// Reine Komponenten: Klasse App erweitert React.PureComponent verfügt im Vergleich zu normalen Komponenten über einen zusätzlichen Datenvergleichsprozess. // Beispiel: Wenn eine Komponente gerendert werden muss, ist der Leistungsverlust sehr groß. Zu diesem Zeitpunkt können Sie reine Komponenten in Betracht ziehen, um einige sinnlose Aktualisierungen zu vermeiden. // Nicht alle Szenarien erfordern reine Komponenten. Normalerweise sollten normale Komponenten verwendet werden. importiere React von 'react'
ReactDOM von „react-dom“ importieren

Klasse App erweitert React.PureComponent {
  Zustand = {
    Namensliste: ['Shuai Peng', 'Lü Bu', 'Zhang Fei'],
    aktuellerName: '',
  }
  rendern() {
    console.log('App-Render')
    zurückkehren (
      <div>
        <h1>Ich bin eine App-Komponente</h1>
        <h3>Ergebnis: {this.state.currentName}</h3>
        <button onClick={this.handleClick.bind(this)}>Den Namen ausrollen</button>
      </div>
    )
  }
  handleKlick() {
    const randomIndex = parseInt(Math.random() * dieser.Zustand.Namensliste.Länge)
    const aktuellerName = dieser.Zustand.Namensliste[randomIndex]

    dies.setState({
      aktuellerName,
    })
    console.log(aktuellerName)
  }

  // Voraussetzung: Wenn sich der Wert von state nicht geändert hat, muss er nicht aktualisiert werden, um unnötige Aktualisierungen zu vermeiden // shouldComponentUpdate(nextProps, nextState) {
  // wenn (dieser.Zustand.aktuellerName === nächsterZustand.aktuellerName) {
  // gibt false zurück
  // } anders {
  // gibt true zurück
  // }
  // }
}
ReactDOM.render(<App></App>, document.getElementById('root'))

// 4. Hinweise zur Verwendung von Reinkomponenten (wenn eine Reinkomponente Unterkomponenten hat, müssen auch die Unterkomponenten Reinkomponenten sein (alles Reinkomponenten))
// (1) Eine reine Komponente führt intern einen oberflächlichen Vergleich durch, daher sind Werttypen in Ordnung und komplexe Typen vergleichen nur Adressen. // (2) Wenn Sie eine reine Komponente verwenden und Daten aktualisieren, sind einfache Typen in Ordnung, aber wenn komplexe Typen aktualisiert werden, muss die Adresse geändert werden (neues Objekt/neues Array).

React von „react“ importieren
ReactDOM von „react-dom“ importieren

Klasse App erweitert React.PureComponent {
  Zustand = {
    Namensliste: ['Shuai Peng', 'Lü Bu', 'Zhang Fei'],
    aktuellerName: '',
    Objekt: {
      Name: 'zs',
      Alter: 18,
    },
  }
  rendern() {
    console.log('App-Render')
    zurückkehren (
      <div>
        <h1>Ich bin eine App-Komponente</h1>
        <p>Name: {dieser.Zustand.Objekt.Name}</p>
        <p>{diese.StaatsnameListe}</p>
        <button onClick={this.handleClick.bind(this)}>Wert ändern</button>
      </div>
    )
  }
  handleKlick() {
    // Um ​​das Objekt zu aktualisieren, bereiten Sie ein neues Objekt vor // const obj = { ...this.state.obj }
    // Objektname = "ls"
    // dies.setState({
    // Objekt: Objekt,
    // })
    // Um ​​das Array zu aktualisieren, bereiten Sie ein neues Array vor // this.setState({
    // Namensliste: [...this.state.nameList, 'Status'],
    // })
    const arr = [...dieser.Zustand.Namensliste]
    arr.push('Wang Wu')
    dies.setState({
      Namensliste: arr,
    })
  }
}
ReactDOM.render(<App></App>, document.getElementById('root'))

React von „react“ importieren
ReactDOM von „react-dom“ importieren
importiere { HashRouter, Link, Route } von 'react-router-dom'

// Routing-Nutzung:
// 1. Laden Sie yarn add react-router-dom herunter
// 2. react-router-dom ist ein Paket, das viele Komponenten enthält // 3. HashRouter-Komponente, ist das gesamte Routing-Objekt, eines für ein Projekt, muss den Inhalt des gesamten Projekts umschließen // 4. Link-Komponente, wird in einen Link gerendert, kann für Routing-Sprünge verwendet werden, konfiguriert den Pfad bis // 5. Route-Komponente, konfiguriert Routing-Regeln (welcher Pfad passt zu welcher Komponente), ist auch der Routing-Ausgang!
// Die einzelnen Routen sind unabhängig voneinander. Solange der Pfad übereinstimmt, kann die konfigurierte Komponente angezeigt werden. // Drei Funktionskomponenten definieren const Home = () => <div>Ich bin die Home-Komponente</div>
const Login = () => <div>Ich bin die Login-Komponente</div>
const User = () => <div>Ich bin eine Benutzerkomponente</div>

Klasse App erweitert React.PureComponent {
  rendern() {
    zurückkehren (
      <div>
        <h1>Ich bin eine App-Komponente</h1>
        <ul>
          <li>
            <Link to="/home">Startseite</Link>
          </li>
          <li>
            <Link to="/login">Anmelden</Link>
          </li>
          <li>
            <Link to="/user">Benutzer</Link>
          </li>
        </ul>

        {/* Sofern der Pfad mit dem Pfad in der Adressleiste übereinstimmt, wird die konfigurierte Komponente angezeigt*/}
        <Routenpfad="/home" Komponente={Home}></Route>
        <Routenpfad="/login" Komponente={Login}></Route>
        <Routenpfad="/Benutzer" Komponente={Benutzer}></Route>
      </div>
    )
  }
}
ReactDOM.render(
  <HashRouter>
    <App></App>
  </HashRouter>,
  document.getElementById('root')
)

React von „react“ importieren
ReactDOM von „react-dom“ importieren
importiere { HashRouter als Router, Link, Route } von 'react-router-dom'

// Router-Komponente, es gibt zwei Typen: HashRouter und BrowserRouter
// 1. Die zugrunde liegende Implementierung von HashRouter basiert auf: dem Hash-Wert der Adressleiste, basierend auf der Implementierung des Ankersprungs // 2. Die zugrunde liegende Implementierung von BrowserRouter basiert auf: der Verlaufs-API von h5, die Adressleiste hat nicht#
// (Wenn Sie es für die Entwicklung verwenden möchten, gibt es kein Problem, aber wenn es online geht, ist eine Hintergrundkonfiguration erforderlich.)

// Definieren Sie drei Funktionskomponenten const Home = () => <div>Ich bin die Home-Komponente</div>
const Login = () => <div>Ich bin die Login-Komponente</div>
const User = () => <div>Ich bin eine Benutzerkomponente</div>

Klasse App erweitert React.PureComponent {
  rendern() {
    zurückkehren (
      <div>
        <h1>Ich bin eine App-Komponente</h1>
        <ul>
          <li>
            <Link to="/home">Startseite</Link>
          </li>
          <li>
            <Link to="/login">Anmelden</Link>
          </li>
          <li>
            <Link to="/user">Benutzer</Link>
          </li>
        </ul>

        {/* Sofern der Pfad mit dem Pfad in der Adressleiste übereinstimmt, wird die konfigurierte Komponente angezeigt*/}
        <Routenpfad="/home" Komponente={Home}></Route>
        <Routenpfad="/login" Komponente={Login}></Route>
        <Routenpfad="/Benutzer" Komponente={Benutzer}></Route>
      </div>
    )
  }
}
ReactDOM.render(
  <Router>
    <App></App>
  </Router>,
  document.getElementById('root')
)

React von „react“ importieren
ReactDOM von „react-dom“ importieren
importiere { HashRouter als Router, NavLink, Route } von 'react-router-dom'
importiere './index.css'

// Link-Komponente und NavLink-Komponente // 1. Link-Komponente, dargestellt als Link, verwendet für Routensprünge, konfigurierter Pfad bis zu // Der Standard-Link hat keinen hervorgehobenen Klassennamen // 2. NavLink-Komponente, dargestellt als Link, verwendet für Routensprünge, konfigurierter Pfad bis zu // (1) NavLink hat, wenn der Pfad übereinstimmt, einen hervorgehobenen Klassennamen aktiv
// (2) Mit activeClassName können Sie den hervorgehobenen Klassennamen konfigurieren. // (3) Mit activeStyle können Sie den Tag und den Hervorhebungsstil direkt konfigurieren. // (4) Fuzzy-Matching mit="/home" kann mit /home /home/aa übereinstimmen.
// Genaue Übereinstimmung, das genaue Attribut muss konfiguriert werden, to="/home", kann nur mit /home übereinstimmen, hebt nur /home hervor // Definieren Sie drei Funktionskomponenten const Home = () => <div>Ich bin die Home-Komponente</div>
const Login = () => <div>Ich bin die Login-Komponente</div>
const User = () => <div>Ich bin eine Benutzerkomponente</div>

Klasse App erweitert React.PureComponent {
  rendern() {
    zurückkehren (
      <div>
        <h1>Ich bin eine App-Komponente</h1>
        <ul>
          <li>
            <NavLink
              genau
              zu="/"
              ActiveStyle = {{ Farbe: 'rot', Schriftgröße: '30px' }}
            >
              Startseite</NavLink>
          </li>
          <li>
            <NavLink zu="/login" activeClassName="selected">
              Anmelden</NavLink>
          </li>
          <li>
            <NavLink zu="/Benutzer" activeClassName="selected">
              Benutzer</NavLink>
          </li>
        </ul>

        {/* Sofern der Pfad mit dem Pfad in der Adressleiste übereinstimmt, wird die konfigurierte Komponente angezeigt*/}
        <Routenpfad="/home" Komponente={Home}></Route>
        <Routenpfad="/login" Komponente={Login}></Route>
        <Routenpfad="/Benutzer" Komponente={Benutzer}></Route>
      </div>
    )
  }
}
ReactDOM.render(
  <Router>
    <App></App>
  </Router>,
  document.getElementById('root')
)

/**index.css*/
.aktiv {
  Farbe: rot;
  Schriftgröße: 30px;
}
.ausgewählt {
  Farbe: blau;
  Schriftgröße: 30px;
}

React von „react“ importieren
ReactDOM von „react-dom“ importieren
importiere { HashRouter als Router, NavLink, Route, Switch } von 'react-router-dom'
importiere './index.css'

// Route-Komponente // Funktion: Hier können Routing-Regeln konfiguriert werden, die gleichzeitig auch das Routing exportieren. Sofern der Pfad übereinstimmt, wird hier die konfigurierte Komponente angezeigt // <Route path="/login" component={Login}></Route>
// 1. Jede Route ist unabhängig voneinander (einschließlich der Konfiguration mehrerer identischer Pfade und der Anzeige unterschiedlicher Komponenten, was ebenfalls möglich ist)
// 2. Der von Route konfigurierte Pfad ist ebenfalls unscharf und kann durch Exact genau abgeglichen werden. // 3. Wenn der Pfad nicht konfiguriert ist, werden die konfigurierten Komponenten standardmäßig angezeigt. // Arbeitet mit der Switch-Komponente zusammen, um die Konfiguration der 404-Seite abzuschließen. // Switch-Komponente: Sie können mehrere Route-Komponenten umschließen, sodass die erste passende Route-Komponente angezeigt werden kann und die nachfolgenden nicht angezeigt werden. // Definierte Funktionskomponente const Home = () => <div>Ich bin die Home-Komponente</div>
const Login = () => <div>Ich bin die Login-Komponente</div>
const User = () => <div>Ich bin eine Benutzerkomponente</div>
const Error = () => <div>Ich bin eine 404-Seite. Die Seite, auf die Sie zugreifen möchten, existiert nicht!!!</div>

Klasse App erweitert React.PureComponent {
  rendern() {
    zurückkehren (
      <div>
        <h1>Ich bin eine App-Komponente</h1>
        <ul>
          <li>
            <NavLink
              genau
              zu="/"
              ActiveStyle = {{ Farbe: 'rot', Schriftgröße: '30px' }}
            >
              Startseite</NavLink>
          </li>
          <li>
            <NavLink zu="/login" activeClassName="selected">
              Anmelden</NavLink>
          </li>
          <li>
            <NavLink zu="/Benutzer" activeClassName="selected">
              Benutzer</NavLink>
          </li>
        </ul>

        {/* Sofern der Pfad mit dem Pfad in der Adressleiste übereinstimmt, wird die konfigurierte Komponente angezeigt*/}
        <Schalter>
          <Routenpfad="/" Komponente={Home} genau></Route>
          <Routenpfad="/login" Komponente={Login}></Route>
          <Routenpfad="/Benutzer" Komponente={Benutzer}></Route>
          <Routenkomponente={Fehler}></Route>
        </Schalter>
      </div>
    )
  }
}
ReactDOM.render(
  <Router>
    <App></App>
  </Router>,
  document.getElementById('root')
)

React von „react“ importieren
ReactDOM von „react-dom“ importieren
importieren {
  HashRouter als Router,
  NavLink,
  Route,
  Schalten,
  Umleiten,
} von „react-router-dom“
importiere './index.css'

// Umleitungskomponente: kann umleiten, von wo nach wo gesprungen werden soll // In React ist es sehr einfach, verschachtelte Routen zu konfigurieren. Sie müssen Routenkomponenten nur direkt dort schreiben, wo Sie verschachtelte Unterrouten schreiben müssen // Voraussetzung: Der Pfad der verschachtelten Unterrouten, die Sie konfigurieren, muss den Pfad der übergeordneten Route enthalten // Definierte Funktionskomponente const Home = () => (
  <div>
    <h3>Ich bin die Home-Komponente</h3>
  </div>
)
const Login = () => (
  <div>
    <h3>Ich bin die Login-Komponente</h3>
  </div>
)
// ------------------------------------------------------------------------
// Voraussetzung: Innerhalb der User-Komponente gibt es auch persönliche Informationen und meine Sammlung const User = () => (
  <div>
    <h3>Ich bin eine Benutzerkomponente</h3>
    <Routenpfad="/Benutzer" genaue Komponente={UserDefault}></Route>
    <Routenpfad="/Benutzer/info" Komponente={Info}></Route>
    <Routenpfad="/Benutzer/Stern" Komponente={Stern}></Route>
  </div>
)
const UserDefault = () => <div>Ich bin der Standard-Benutzerinhalt</div>
const Info = () => <div>Ich bin die Info-Komponente</div>
const Star = () => <div>Ich bin die Star-Komponente</div>

// -------------------------------------------------------------------------
const Error = () => <div>Ich bin eine 404-Seite. Die Seite, auf die Sie zugreifen möchten, existiert nicht!!!</div>

Klasse App erweitert React.PureComponent {
  rendern() {
    zurückkehren (
      <div>
        <h1>Ich bin eine App-Komponente</h1>
        <ul>
          <li>
            <NavLink
              genau
              zu="/"
              ActiveStyle = {{ Farbe: 'rot', Schriftgröße: '30px' }}
            >
              Startseite</NavLink>
          </li>
          <li>
            <NavLink zu="/login" activeClassName="selected">
              Anmelden</NavLink>
          </li>
          <li>
            <NavLink zu="/Benutzer" activeClassName="selected">
              Benutzer</NavLink>
          </li>
        </ul>

        {/* Sofern der Pfad mit dem Pfad in der Adressleiste übereinstimmt, wird die konfigurierte Komponente angezeigt*/}
        <Schalter>
          <Routenpfad="/" Komponente={Home} genau></Route>
          <Weiterleitung von="/home" nach="/"></Weiterleitung>
          <Routenpfad="/login" Komponente={Login}></Route>
          <Routenpfad="/Benutzer" Komponente={Benutzer}></Route>
          <Routenkomponente={Fehler}></Route>
        </Schalter>
      </div>
    )
  }
}
ReactDOM.render(
  <Router>
    <App></App>
  </Router>,
  document.getElementById('root')
)

React von „react“ importieren
ReactDOM von „react-dom“ importieren
importiere { HashRouter als Router, Route, Link } von 'react-router-dom'
importiere './index.css'

// Wenn Sie die Parameterinformationen des dynamischen Routings erhalten möchten, müssen Sie sie über Requisiten abrufen.
// Route übergibt routenbezogene Informationen und Methoden über Props an Ihre Komponente // const Product = (props) => <div>Ich bin eine Produktkomponente</div>

Klasse Produkt erweitert React.Component {
  rendern() {
    // this.props-Parameter // (1) history speichert die Methode zum Anspringen der Route // (2) location speichert die aktuelle Routenadresse // (3) match speichert die dynamischen Routenparameter console.log(this.props)
    Konsole.log(diese.props.match.params.id)
    zurückkehren (
      <div>
        <h3>Ich bin eine Produktkomponente – {this.props.match.params.id}</h3>
        <button onClick={this.handleClick.bind(this)}>Zurück zur Startseite</button>
      </div>
    )
  }
  handleKlick() {
    // Konsole.log(diese.Props.History)
    // diese.props.history.go(-1)
    dies.props.history.push('/home')
  }
}

const Home = () => <div>Dies ist die Homepage</div>

Klasse App erweitert React.Component {
  rendern() {
    zurückkehren (
      <div>
        <h1>Ich bin eine App-Komponente</h1>
        <div>
          <Link to="/home">Startseite</Link>
          <Link to="/product/1">Produkt 1</Link>
          <Link to="/product/2">Produkt 2</Link>
          <Link to="/product/3">Produkt 3</Link>
          <Link to="/product/4">Produkt 4</Link>
        </div>
        <Routenpfad="/produkt/:id" Komponente={Produkt}></Route>
        <Routenpfad="/home" Komponente={Home}></Route>
      </div>
    )
  }
}
ReactDOM.render(
  <Router>
    <App></App>
  </Router>,
  document.getElementById('root')
)