[ReactJs] Créer un système de navigation

React router est un composant ReactJs qui va vous permettre d’afficher des composants en fonction d’une URL spécifique. Nous allons voir ensemble comment l’utiliser au sein de notre application pour créer un système de navigation. Pour notre exemple nous allons prendre la structure d’un site web classique. Voilà à quoi la structure de notre site va ressembler :

Voilà notre composant principal :

import React, { Component } from 'react';

class App extends Component {
  render() {
    return (
      <div className="main">
        <header>
          <figure><img src="/assets/img/logo.jpg"></figure>
          <nav>
            <ul>
              <li><a href="">Accueil</a></li>
              <li><a href="">Blog</a></li>
              <li><a href="">A propos</a></li>
              <li><a href="">Contact</a></li>
            </ul>
          </nav>
        </header>
        <main>
          <!-- Tout notre contenu -->
        </main>
        <aside>
          <ul>
            <li><a href="">Accueil</a></li>
            <li><a href="">Blog</a></li>
            <li><a href="">A propos</a></li>
            <li><a href="">Contact</a></li>
          </ul>
        </aside>
        <footer>A&F Développement</footer>
      </div>
    );
  }
}

export default App;

npm install --save react-router-dom

Importation:

import { BrowserRouter } from "react-router-dom";

Créer notre navigation

Pour créer des liens avec react-router, il faut importer le composant NavLink et l’utiliser pour nos liens. Pour cela on va modifier notre header :

import { BrowserRouter as NavLink } from "react-router-dom";

<ul>
    <li><NavLink to="/">Accueil</NavLink></li>
    <li><NavLink to="/blog">Blog</NavLink></li>
    <li><NavLink to="/about">A propos</NavLink></li>
    <li><NavLink to="/contact">Contact</NavLink></li>
</ul>

Quelques explications :

Ici nous avons remplacé les balises a par des link. la propriété « to » correspond a l’url vers lequel mène le lien.

Créer notre première page

Pour créer notre première page, nous avons besoin de créer notre premier composant. Pour cela, on créait un nouveau fichier qui s’appelle Accueil qui correspondra à notre page d’accueil :

import React, { Component } from 'react';

export default class Accueil extends Component {
  render() {
    return (
      <div className="main">
        <p>Je suis la page d'accueil</p>
      </div>
    );
  }
}

Et sur notre fichier app.js, on importe le composant Accueil.js et l’affichage grâce au composant Route que nous avons besoin d’importer.

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

class App extends Component {

    render() {
        return(
            <Router>
                <div className="main">
                    <header>
                        <figure><img src="/assets/img/logo.jpg" /></figure>
                        <nav>
                            <ul>
                                <li><NavLink to="/">Accueil</NavLink></li>
                                <li><NavLink to="/blog">Blog</NavLink></li>
                                <li><NavLink to="/about">A propos</NavLink></li>
                                <li><NavLink to="/contact">Contact</NavLink></li>
                            </ul>
                        </nav>
                    </header>
                    <main>
                        <Route exact path="/" component={Accueil}/>
                    </main>
                    <aside>
                        <ul>
                            <li><NavLink to="/">Accueil</NavLink></li>
                            <li><NavLink to="/blog">Blog</NavLink></li>
                            <li><NavLink to="/about">A propos</NavLink></li>
                            <li><NavLink to="/contact">Contact</NavLink></li>
                        </ul>
                    </aside>
                    <footer>A&F Développement</footer>
                </div>
            </Router>
        );
    }
}

Quelques explications

Nous avons importé le composant NavLink pour notre navigation, et notre composant Accueil. Nous avons utilisé le composant « Route » afin d’afficher notre composant accueil. Si vous souhaitez afficher un composant pour la route « /blog » il faudra utiliser :

<Route exact path="/" component={Blog}/>

Si vous souhaitez mettre des parametre (par exemple le slug ou l’id de votre article) vous pouvez faire comme ceci :

<Route exact path="/blog/:id" component={Blog}/>

Si vous vous rendez à l’url suivante : http://localhost/blog/15 pour récupérer l’id 15, il faut le récupérer dans le props :

var id = this.props.match.params.id;

Il est important de comprendre le terme « exact ». Par exemple pour le blog, à l’url /blog/15, si vous ne mettez pas exact alors il affichera le composant à l’url /blog et /blog/:id car la base de l’url correspond.

Dans ce tutoriel nous avons utilisé le composant NavLink plutot que Link pour notre navigation. Le principal intéret est que NavLink ajoute un class « active » quand l’url correspond. (vous pouvez ajouter un terme exact comme le composant Route pour l’affichage de la classe active) Cela nous permet d’appliquer un style particulier quand le lien est actif.