问专用线旁边有多个不同的布局

EN

import React from 'react';
import { LayoutOne, LayoutTwo, LayoutThree } from './layouts';
import RouteWithLayout from './components/RouteWithLayout/RouteWithLayout';
import Login from './components/Login/Login';
import Dash from './components/Dash/Dash';
import Home from './components/Home/Home';
import NotFound from './components/NotFound/NotFound';
import ErrorBoundary from './components/ErrorBoundary/ErrorBoundary';

const Routes = () => (
  <ErrorBoundary>
      <Switch>
          <RouteWithLayout
             component={Home}
             exact
             layout={LayoutOne}
             path="/"
             isPrivate={false}
          />
          <RouteWithLayout
             component={Dash}
             exact
             layout={LayoutTwo}
             path="/dash"
             isPrivate={true}
          />
          <RouteWithLayout
             component={Login}
             exact
             layout={LayoutThree}
             path="/login"
             isPrivate={false}
          />
          <Route component={NotFound}/>
      </Switch>
  </ErrorBoundary>
);

export default Routes;

import React from 'react';
import { Route } from 'react-router-dom';
import { authService } from "./services/auth.service";

const RouteWithLayout = props => {

   const { layout: Layout, component: Component, private: isPrivate, ...rest } = props;
   const isLogged = authService.isLogged();

   return (
       <Route
       {...rest}
       render={matchProps =>
         isPrivate ? (
           isLogged ? (
             <Layout>
                <Component {...matchProps} />
             </Layout>
           ) : (
             <Redirect
               to={{
               pathname: "/login",
               state: { from: matchProps.location }
               }}
             />
           )
         ) : (
           <Layout>
              <Component {...matchProps} />
           </Layout>
         )
       }
      />
  )

};

export default RouteWithLayout;