#CestFacile : React Router v4 – Créer un système de layout

Allez hop, je vous propose aujourd’hui de mettre en place le fabuleux routeur React de Ryan Florence et Mickael Jackson.

On verra un peu plus tard pour transformer le tout afin d’exploiter tout le potentiel de Redux dans la foulée. Par contre on va tout de même s’amuser un peu en mettant en place un layout avec Semantic UI.

Configuration

Comme toujours on commence par Yarn :

yarn add react-router-dom semantic-ui-css semantic-ui-react

On installe tout ce dont on aura besoin par la suite, y compris semantic-ui pour React et le CSS qui va bien.

On créé ensuite nos Routes :

import React from 'react';
import { BrowserRouter, Switch } from 'react-router-dom';
import App from './Scenes/App/App';
import Login from './Scenes/Login/Login';
import Layout from './Components/Layout/Layout'

export default () => {
  return (
    <BrowserRouter>
      <Switch>
        <Layout exact path='/' component={App}/>
        <Layout exact path='/login' component={Login}/>
      </Switch>
    </BrowserRouter>
  )
}

Dans Routes.js à la racine de votre projet (ou là où ca vous semblera le plus judicieux) 

On remarque que :

  • Habituellement quand on déclare nos routes avec React Router, on utilise le composant <Route /> à la place de Layout.
  • Le composant Layout est, comme son nom l’indique, le layout que l’on compte utiliser pour chacun (ou du moins l’essentiel) de nos routes
  • On va voir juste après comment ça fonctionne.

Render props is the key

Notre Layout fonctionne sur la base des Render Props. C’est un pattern plébiscité par les créateurs de React Router et qui commence à faire son chemin. L’idée étant de gagner en visibilité par rapport à ce que proposent les High Order Component.

On reviendra sur le sujet dans un autre post.

Quoiqu’il en soit, en deux mots, notre layout va prendre un component en props, et l’afficher où l’on veut dans notre render, y compris à l’intérieur d’un autre component (Route) ça ressemble à ça :

 

See the Pen ZrqwdB by daibai (@Daibai) on CodePen.

Dans Components/Layout/Layout.js

On remarque ici que :

  • On passe bien en props le component que l’on veut afficher en bout de course (App, Login…)
  • On a notre Layout qui est render en prop du composant Route (issu de React Router)
  • On travaille sur le path pour définir le lien actif dans notre menu en header

On a plus qu’à modifier un petit chouya notre index.js :

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import Routes from './Routes';
import registerServiceWorker from './registerServiceWorker';
import {Provider} from 'react-redux'
import configureStore from './Store/configureStore'
import 'semantic-ui-css/semantic.min.css';

const store = configureStore();

ReactDOM.render(
  <Provider store={store}>
    <Routes />
  </Provider>,
  document.getElementById('root')
);

registerServiceWorker();
Dans index.js
Y a pas grand chose qui change à part l’import de nos routes qui viennent remplacer notre App dans le Provider.
 
Du coup, notre composant App et notre composant Login ne contiennent que le JSX nécessaire pour leur affichage, que ce soit des containers ou des presentational components
J’utilise ici Semantic UI car je trouve ce framework css plutôt bien foutu, mais vous pouvez faire exactement la même chose que dans ce post avec Antd, Bootstrap et compagnie.

2 commentaires Ajoutez le votre

  1. Yann Deo dit :

    1-Salut Grégory ; dejà merci pour ce tuto qui aborde des problématique peu exploité dans les formations francophone.
    Je souhaiterai comprends comment mettre en place un dashboard (avec son layout différent de celui du home page),
    bien évidement le layout des formulaire de Login et Register sont souvent différent aussi .. sachant qu’on a un seul point d’entrée index.js qui utilise déjà le layout index.html?.
    2-Aussi qu’est ce que c’est ce {..rest}

  2. ayasi dit :

    Bonjour, j’ai une navbarr avec un input search en tant que DefaultLayout. Savez-vous comment puis-je récupéré la valeur de cette input depuis mon component Home.js ?

Laisser un commentaire

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