React Router

Routing

En cas de besoin d'un "bloc" partagé entre différentes pages (header, menu, etc.), on DEVRAIT encapsuler un "sous-router" dans un conteneur dédié à ces pages.

Pas bien 👎
Bien 👍

import { BrowserRouter, Route, Switch } from 'react-router-dom';

const ROUTE_CART_PROCEED = '/cart/:id/proceed';
const ROUTE_CART_REFUND = '/cart/:id/refund';

<Router>
  <Switch>
    <Route exact path={[ROUTE_CART_PROCEED, ROUTE_CART_REFUND]}>
      <CartContainer>
        <Switch>
          <Route exact path={ROUTE_CART_PROCEED}>
            <CartProceed />
          </Route>
          <Route exact path={ROUTE_CART_REFUND}>
            <CartRefund />
          </Route>
        </Switch>
      </CartContainer>
    </Route>
  </Switch>
</Router>;

function CartContainer({ type, children }) {
  return (
    <>
      <CartHeader />

      {children}
    </>
  );
}

On PEUT aussi extraire tout le "sous-routeur" dans un composant spécifique quand le nombre de route à gérer devient trop grand et que le module est autonome :

import { BrowserRouter, Route, Switch } from 'react-router-dom';

const ROUTE_CART_PROCEED = '/cart/:id/proceed';
const ROUTE_CART_REFUND = '/cart/:id/refund';

<Router>
  <Switch>
    <Route exact path={[ROUTE_CART_PROCEED, ROUTE_CART_REFUND]}>
      <CartContainer />
    </Route>
  </Switch>
</Router>;

function CartContainer({ type }) {
  return (
    <>
      <CartHeader />

      <Switch>
        <Route exact path={ROUTE_CART_PROCEED}>
          <CartProceed />
        </Route>
        <Route exact path={ROUTE_CART_REFUND}>
          <CartRefund />
        </Route>
      </Switch>
    </>
  );
}

#Routing

Routing