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

View more Tutorials:

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.

<BrowserRouter> vs <HashRouter>

Le  React Router vous fournit deux composants tels que  <BrowserRouter> & <HashRouter>. Ces deux composants sont différents dans le type de URL 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 :

View more Tutorials: