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

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>
    )
}

Maintenant le routeur deviens notre point d’entrée de notre application

//src/index.jsx

import React from 'react';
import { render } from 'react-dom';

import MainRouter from './routes'

render( <MainRouter />, document.getElementById('react-app'))

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.

4 commentaires

Yann Deo Publié le1:59 - Nov 16, 2018

-Dans ce cas present le composant routes.jsx n’est donc pas importé pour être défini comme point d’entrée et rendu via la div #reat-root de index.html?
– …rest c’est quoi

Svp besoin d’eclaircicement merci pour ce tuto

kylan Publié le8:11 - Juin 18, 2019

Bonjour savez vous comment interagir avec un composant layout ?Par exemple, j’ai une barre de recherche en layout et je voudrais que quand l’utilisateur tape sa recherche, cela filtre ce qui se trouve dans mon composant movie.js.

kylan ayadi Publié le11:08 - Juin 18, 2019

Bonjour, j’ai une navbar avec un searchInput en tant que DefaultLayout. J’utilise se DefaultLayout dans ma page Home. Comment puis je faire pour accéder à la valeur de mon searchinput depuis ma Home?