Réagir Routeur v4 avec plusieurs mises en page

Si vous utilisez Tapuscrit et souhaitez suivre cette réagissent approche de mise en page vous pouvez déclarer votre mise en page comme ceci:

import './Default.less';

import React from 'react';
import { Route } from "react-router-dom";

import { Sider } from './Components';
import { Notification } from 'Client/Components';

interface IDefaultProps {
  component: any
  path?: string;
  exact?: boolean;
}

const Default: React.SFC<IDefaultProps> = (props) => {
  const { component: Component, ...rest } = props;
  return <Route {...rest} render={matchProps => (
    <div className="defaultLayout">
      <Sider />
      <div className="defaultLayoutContent">
        <Component {...matchProps} />
      </div>
      <Notification />
    </div>
  )} />
}

export default Default;

Et de déclarer de tels axes:

import React from 'react';
import { Route } from 'react-router-dom';

import { DefaultLayout } from 'Client/Layout';
import { Dashboard, Matters, Schedules, Students } from './Containers';

export const routes = <div>
  <DefaultLayout exact path="/" component={Dashboard} />
  <DefaultLayout path="/matters" component={Matters} />
  <DefaultLayout path="/schedules" component={Schedules} />
  <DefaultLayout path="/students" component={Students} />
</div>;

J'ai essayé Florians réponse, mais ce n'était pas assez pour moi que de réagir permettra de créer une instance distincte de votre Mise en page pour chaque itinéraire, par conséquent, toute navigation transitions comme un onglet coulissante sera tué.

Je suis en espérant une solution plus élégante, mais c'est mon application fonctionne à nouveau avec v4.

Définir une Route pointant vers un composant qui va décider de ce qu'à envelopper la route dans

<Router>
  <Route component={AppWrap} />
</Router>

Dans AppWrap faire quelque chose comme

 var isPrivateLayout;
 for (var path of listOfPrivateLayoutPaths) {
   if (this.props.location.pathname == path) {
     isPrivateLayout= true;
   }
 }
 if (isPrivateLayout) {
   return <PrivateLayout>
        (routes)
      </PrivatelyLayout>
 } else {
   return <PublicLayout>
        (routes)
      </PublicLayout>;
 }

Itinéraire Config peut-être pourrait être utilisé pour un nettoyant pour la représentation de ce fait, pas sûr.

Mise à jour: j'ai résolu d'une autre façon, mais si vous oblige à l'espace de noms les différentes parties de votre application avec le /app ou /admin par exemple.

Chacun des composants UserRoutes, AdminRoutes et PublicRoutes sont à la base de gros composants de Commutateur avec la mise en page spécifique à sa racine.

Voici à quoi il ressemble:

<Router>
  <Switch>
    <Route path="/app" render={props => <UserRoutes {...props} />} />
    <Route path="/admin" render={props => <AdminRoutes {...props} />} />
    <Route path="/" render={props => <PublicRoutes {...props} />} />
  </Switch>
</Router>

Ancien: Une solution serait d'utiliser le rendu prop de chaque Itinéraire, mais il semble vraiment lourd:

<Router>
  <Switch>
    <Route
      path="/"
      render={() => <PublicLayout><HomePage /></PublicLayout>}
    />
    <Route
      path="/about"
      render={() => <PublicLayout><AboutPage /></PublicLayout>}
    />
    <Route
      path="/profile"
      render={() => <PrivateLayout><ProfilePage /></PrivateLayout>}
    />
    <Route
      path="/dashboard"
      render={() => <PrivateLayout><DashboardPage /></PrivateLayout>}
    />
  </Switch>
</Router>

@Qop est correct, cependant, dans les nouveaux Réagir Routeur, j'ai remarqué si vous avez votre chemin de la racine à l'intérieur de l'interrupteur, comme le premier parcours, il sera toujours à la hauteur de l'informatique et, par conséquent, ne jamais afficher vos trajets suivants. Vous devez mettre le chemin de la racine à la fin.

<Switch>
    <RouteWithLayout layout={PublicLayout} path="/about" component={AboutPage}/>
    <RouteWithLayout layout={PrivateLayout} path="/profile" component={ProfilePage}/>
    <RouteWithLayout layout={PrivateLayout} path="/dashboard" component={DashboardPage}/>
    <RouteWithLayout layout={PublicLayout} path="/" component={HomePage}/>
</Switch>

Cette solution fonctionne.

<Router>
  <Switch>
    <PublicLayout>
      <Route exact path="/" component={HomePage} />
      <Route exact path="/about" component={AboutPage} />
    </PublicLayout>
  </Switch>       

  <Switch>
    <PrivateLayout>
      <Route exact path="/profile" component={ProfilePage} />
      <Route exact path="/dashboard" component={DashboardPage} />
    </PrivateLayout>
  </Switch>    
</Router>