Différence entre le chemin exact de l'itinéraire et le chemin de l'itinéraire

1. Différence entre le chemin exact de l’itinéraire et le chemin de l’itinéraire
2. Conclusion

Le react router est un moyen de créer des applications multi-pages dans React ; lorsqu’il est appliqué, il crée la fonctionnalité qui permet aux utilisateurs de cliquer sur un lien qui les amène à une nouvelle page.

Lorsque nous créons deux ou plusieurs liens au sein d’un composant, les choses deviennent délicates et nous devons improviser.

Différence entre le chemin exact de l’itinéraire et le chemin de l’itinéraire

Lorsque nous avons deux liens ou plus dans un composant et que nous utilisons route path, la page affichera les éléments sur les deux liens si nous ne voulons afficher que le deuxième lien. Mais lorsque nous utilisons le chemin exact de l'itinéraire, la page ne restitue que les détails du deuxième lien.

Regardons l’exemple ci-dessous.

Tout d’abord, nous avons créé un nouveau projet React ; ensuite, nous allons naviguer dans le dossier du projet dans notre terminal et installer react router; nous utiliserons npm install react-router-dom@5.2.0.

Ensuite, nous mettrons des codes dans notre fichier App.js comme ci-dessous.

Extrait de code - 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;

Production:

Lorsque nous exécutons l’application, nous voyons "Welcome Home" sur la page, mais lorsque nous essayons de naviguer vers la page "about" avec cette adresse, "localhost:3000/about", nous voyons que le la page charge les deux routes et nous voyons à la fois “Welcome Home” et “About”.

C’est parce que React lit l’URL à partir du "/" puisque nous n’avons pas spécifié le contraire dans notre code.

Mais à l’aide du chemin exact, nous pouvons spécifier ce que nous voulons que React lise, nous le faisons donc dans notre code.

Extrait de code - 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;

Production:

Nous ajoutons le chemin exact aux deux composants et voyons que lorsque nous allons dans le "About", cela ne rend que la page "about".

Conclusion

Sans la fonction chemin exact, les développeurs de React devront constamment créer des composants séparés pour chaque lien ; cela conduira à des codes encombrés, le rendu du site Web sera plus lent, sans oublier que ce sera un exercice rigoureux et répétitif.