Comprendre le ReactJS-Router avec un exemple basique (NodeJS)

Qu'est-ce que React Router ?
Créer un projet et installer la bibliothèque
Écrire le code

1. Qu'est-ce que React Router ?

React Router signifie une bibliothèque de routage (routing) standard dans React. Cela rend l'interface de l'application synchrone avec l'URL du navigateur. Le React Router vous permet de router clairement le "flux de données" (data flow) dans votre application. Cela équivaut à une affirmation. Si vous avez cette URL, elle sera équivalente à cette Route et l'interface sera comme suit.

L'idée de Router (Routeur) est tellement utile car vous travaillez avec React, une bibliothèque Javascript pour programmer des applications d'une seule page (Single Page Application). Afin de développer une application React il vous faut écrire plusieurs Component mais il a besoin d'un seul fichier afin de servir des utilisateur, c'est index.html.

Le React Router vous permet de définir des URL dynamiques et de sélectionner un Component approprié pour render (afficher) sur le navigateur d'utilisateur en correspodance à chaque URL.

Le React Router vous fournit deux composants tels que <BrowserRouter> & <HashRouter>. Ces deux composants sont différents dans le type deURL qu'ils créent et synchronisent avec.

// <BrowserRouter>
http://example.com/about

// <HashRouter>
http://example.com/#/about

<BrowserRouter> est utilisé plus couramment, il utilise le History API incluse dans HTML5 pour surveiller l’historique de votre routeur tandis que <HashRouter> utilise le hash de l’URL(window.location.hash) pour tout mémoriser. Si vous avez l'intention de soutenir des anciens navigateurs, vous devez être scellé contre le <HashRouter> ou créer une application React à l'aide du routeur côté client. <HashRouter> est un choix raisonnable.

<Route>

Le composant <Route> définit une relation (mapping) entre une URL et un Component. Cela signifie que lorsque l'utilisateur visite une URL sur le navigateur, un Component correspondant doit être rendu sur l'interface.

<BrowserRouter>
  <Route exact path="/" component={Home}/>
  <Route path="/about" component={About}/>
  <Route path="/topics" component={Topics}/>
</BrowserRouter>


<HashRouter>
  <Route exact path="/" component={Home}/>
  <Route path="/about" component={About}/>
  <Route path="/topics" component={Topics}/>
</HashRouter>

L'attribut exact est utilisé dans le <Route> afin de dire que ce <Route> ne fonctionnne que si la URL sur le navigateur correspond absolument à la valeur de son attribut path.

<BrowserRouter>
...
<Route path="/about" component={About}/>
...
</BrowserRouter>

http://example.com/about ==> OK Work!
http://example.com/about#somthing ==> OK Work!
http://example.com/about/something ==> OK Work!
http://example.com/about/a/b ==> OK Work!

-------------------

http://example.com/something/about ==> Not Work!
http://example.com/something/about#something ==> Not Work!
http://example.com/something/about/something ==> Not Work!

<HashRouter>
...
<Route path="/about" component={About}/>
...
</HashRouter>

http://example.com#/about ==> OK Work!
http://example.com#/about/somthing ==> OK Work!

----------------

http://example.com/something ==> Not Work!
http://example.com/something#/about ==> Not Work!

<BrowserRouter>
...
<Route exact path="/about" component={About}/>
...
</BrowserRouter>

http://example.com/about ==> OK Work!
http://example.com/about#somthing ==> OK Work!

-------------

http://example.com/about/something ==> Not Work!
http://example.com/about/a/b ==> Not Work!

http://example.com/something/about ==> Not Work!
http://example.com/something/about#something ==> Not Work!
http://example.com/something/about/something ==> Not Work!

<HashRouter>
...
<Route exact path="/about" component={About}/>
...
</HashRouter>

http://example.com#/about ==> OK Work!

----------------

http://example.com#/about/somthing ==> Not Work!
http://example.com/something ==> Not Work!
http://example.com/something#/about ==> Not Work!

2. Créer un projet et installer la bibliothèque

Tout d'abord, vous devez installerr l'outil create-react-app, et créer un projet React nommé react-router-basic-app :

# Install tool:

npm install -g create-react-app

# Create project named 'react-router-basic-app':

create-react-app react-router-basic-app

Votre projet est créé :

Puis, CD au projet qui a été créé et exécutez la commande ci-dessous pour installer la bibliothèque react-router-dom dans votre projet :

# CD to your project

cd react-router-basic-app

# Install react-router-dom library:

npm install --save react-router-dom

Ouvrez votre projet dans un éditeur auquel vous êtes habitué (par exemple, Atom). Ouvrez le fichier package.json, vous verrez que la bibliothèque react-router-dom a été ajoutée à votre projet.

Démarrez votre application :

# Start App

npm start

3. Écrire le code

Supprime tous les contenus des deux fichiers App.css & App.js, nous allons écrire le code de ces deux fichiers.

App.css

.main-route-place {
  border: 1px solid  #bb8fce;
  margin:3px;
  padding: 5px;
}

.secondary-route-place {
  border: 1px solid #a2d9ce;
  margin: 5px;
  padding: 5px;
}

App.js

import React from "react";
import { BrowserRouter, Route, Link } from "react-router-dom";

import './App.css';

class App extends React.Component {

  render()  {
    return  (
      <BrowserRouter>
        <div>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/about">About</Link>
            </li>
            <li>
              <Link to="/topics">Topics</Link>
            </li>
          </ul>

          <hr />
          <div className="main-route-place">
            <Route exact path="/" component={Home} />
            <Route path="/about" component={About} />
            <Route path="/topics" component={Topics} />
          </div>
        </div>
      </BrowserRouter>
    );
  }

}

class Home extends React.Component {

  render()  {
    return (
      <div>
        <h2>Home</h2>
      </div>
    );
  }
}

class About  extends React.Component {
  render() {
    return (
      <div>
        <h2>About</h2>
      </div>
    );
  }
}

class Topics extends React.Component {
  render( ) {
    return (
      <div>
        <h2>Topics</h2>
        <ul>
          <li>
            <Link to={`${this.props.match.url}/rendering`}>
              Rendering with React
            </Link>
          </li>
          <li>
            <Link to={`${this.props.match.url}/components`}>Components</Link>
          </li>
          <li>
            <Link to={`${this.props.match.url}/props-v-state`}>
              Props v. State
            </Link>
          </li>
        </ul>

        <div className="secondary-route-place">
          <Route
            path={`${this.props.match.url}/:topicId`}
            component={Topic} />
          <Route
            exact
            path={this.props.match.url}
            render={() =>
              <h3>
                Please select a topic.
              </h3>
            }
            />
        </div>
      </div>
    );
  }
}

class Topic extends React.Component {
  render()  {
    return (
      <div>
        <h3>
          {this.props.match.params.topicId}
        </h3>
      </div>
    );
  }
}

export default App;

Il n'est pas nécessaire de changer les deux fichiers index.js & index.html :

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';

ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="theme-color" content="#000000">
 
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
   
    <title>React App</title>
  </head>
  <body>
    <noscript>
      You need to enable JavaScript to run this app.
    </noscript>
    <div id="root"></div>
    
  </body>
</html>

Exécutez votre application et observez les résultats sur le navigateur :

Comprendre le ReactJS-Router avec un exemple basique (NodeJS)

1. Qu'est-ce que React Router ?

2. Créer un projet et installer la bibliothèque

3. Écrire le code

Tutoriels de programmation ReactJS

Tutoriels de programmation ReactJS

Articles les plus récents