Unterschied zwischen exaktem Routenpfad und Routenpfad

1. Unterschied zwischen exaktem Routenpfad und Routenpfad
2. Fazit

Der react router ist eine Möglichkeit, mehrseitige Anwendungen in React zu erstellen; Wenn es angewendet wird, erstellt es die Funktionalität, die es Benutzern ermöglicht, auf einen Link zu klicken, der sie zu einer neuen Seite führt.

Wenn wir innerhalb einer Komponente zwei oder mehr Verknüpfungen erstellen, wird es schwierig und wir müssen improvisieren.

Unterschied zwischen exaktem Routenpfad und Routenpfad

Wenn wir zwei oder mehr Links innerhalb einer Komponente haben und Routenpfad verwenden, rendert die Seite die Elemente auf beiden Links, wenn wir nur den zweiten Link rendern möchten. Aber wenn wir den Routengenauen Pfad verwenden, rendert die Seite nur die Details im zweiten Link.

Schauen wir uns das Beispiel unten an.

Zuerst haben wir ein neues React-Projekt erstellt; Als nächstes navigieren wir in unserem Terminal in den Projektordner und installieren react router; wir werden npm install respond-router-dom@5.2.0 verwenden.

Dann werden wir einige Codes in unsere App.js-Datei wie unten einfügen.

Codeschnipsel - App.js:

import './App.css';

import React, {Component} from 'react';
import {BrowserRouter as Router} from 'react-router-dom';
import Route from 'react-router-dom/Route';

class App extends Component {
  render() {
    return (
      <Router>
        <div className='App'>
          <Route path='/' render={
    () => {
              return (<h1>Welcome Home</h1>);
            }
          } />
          <Route path='/about' render={
            () => {
              return (<h1>About</h1>);
            }
          } />

        </div>
      </Router>
    );
  }
}

export default App;

Ausgabe:

Wenn wir die App ausführen, sehen wir "Welcome Home" auf der Seite, aber wenn wir versuchen, mit dieser Adresse "localhost:3000/about" zur Seite "about" zu navigieren, sehen wir, dass die Seite lädt beide Routen und wir sehen sowohl "Welcome Home" als auch "about".

Dies liegt daran, dass React die URL aus dem "/" liest, da wir in unserem Code nichts anderes angegeben haben.

Aber mit Hilfe des exact path können wir angeben, was React lesen soll, also machen wir das in unserem Code.

Codeschnipsel - App.js:

import './App.css';

import React, {Component} from 'react';
import {BrowserRouter as Router} from 'react-router-dom';
import Route from 'react-router-dom/Route';

class App extends Component {
  render() {
    return (
      <Router>
        <div className='App'>
          <Route exact path='/' render={
    () => {
              return (<h1>Welcome Home</h1>);
            }
          } />
          <Route exact path='/about' render={
            () => {
              return (<h1>About</h1>);
            }
          } />

        </div>
      </Router>
    );
  }
}

export default App;

Ausgabe:

Wir fügen den exakten Pfad zu beiden Komponenten hinzu und sehen, dass, wenn wir zu About gehen, nur die Seite About gerendert wird.

Fazit

Ohne die Funktion exakter Pfad müssen React-Entwickler ständig separate Komponenten für jeden Link erstellen; Dies führt dazu, dass Codes unübersichtlich werden, das Rendern der Website langsamer wird, ganz zu schweigen davon, dass es eine strenge und sich wiederholende Übung sein wird.