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