#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.

Laisser un commentaire

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