React par la pratique – 5: Utiliser les layouts avec React-Router 4

composant avec React

Sommaire

#Introduction

Quand on développe une application web, on a bien souvent besoin de gérer les layouts, pour rappel, une layout contient des composants communs à toutes les pages ( bare de menu, footer, header … ), ça permet d’éviter de copier / coller du code.

Dans l’article précédent on a utilisé la solution de layout par défaut,mais cette dernière a un défaut majeur, le code du routeur est mélangé au code de layout, personnellement je n’aime pas trop cette approche, ça ajoute un couplage entre le code du routeur et celui de mon application que j’essaye d’éviter.

Dans cet article je souhaite présenter une alternative propre à cette solution, le bonus c’est qu’on pourra avoir plusieurs Layout dans notre application si on suit cette approche.

Avant de commencer

on va supposer qu’on a 3 pages utilisant les layouts comme suit :

Layout Pages
Layout 1 ( menu en haut de la page ) / et /about
Pas de layout /login

Ainsi la page login sera affichée sans menu en haut de la page contrairement à la homepage et la page about.

Mise en place

On commence par préparer la structure de la page ( layout) :

// src/Layout.jsx

import React from 'react'
import {Link, Route} from 'react-router-dom'

export default function DefaultLayout ({component: MatchedPage, ...rest}) {
    return (
        <Route {...rest} render={matchProps => (
            <div>

                <Link to='/'>
                    Home
                </Link>
                <br/>
                <Link to='/about'>
                    About
                </Link>

                <hr/>


                <MatchedPage {...matchProps} />
            </div>
        )} />
    )
};

Ce composant va contenir toute la structure de la page, on positionne le menu et on désigne l’emplacement de la page pointée par l’URL par le composant MatchedPage.

Il suffit maintenant de configurer nos routes ainsi :

// src/routes.jsx
import React from 'react'
import { BrowserRouter as Router, Route, IndexRoute } from 'react-router-dom'
import { Link } from 'react-router-dom'


import DefaultLayout from './Layout'

import Login from './pages/Login'
import Home from './pages/Home'
import About from './pages/About'

export default function MainRouter() {
    return (
        <Router>
            <div>
                <DefaultLayout exact path="/" component={Home} />
                <DefaultLayout path="/about" component={About} />
                <Route path="/login" component={Login} />
            </div>
        </Router>
    )
}

Notez que pour utiliser notre layout dans notre page, il suffit de remplacer le composant Route par DefaultLayout pour l’URL voulue.

ainsi nos deux pages Home et About auront tout les deux la même structure ( menu en haut de la page), et la page login sera affichée directement sans layout.

Code source

Le code source est disponible sur github au tag suivant Step-4 pour pointer directement sur cette étape.

pour rappel, voici la commande pour choisir un tag avec git :

git checkout Step-4

Suite

Dans le prochain article on va essayer de comprendre le pattern derrière Flux, l’alternative au MVC proposée par Facebook.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *