How I can Have Two Layout in React CoreUi

[MoradiGit]

Hi I have Costumize react core Ui i have two dashboard but only onse routing work what should i do ?

DefaultLayout.js and DefaultOutLayout.js

App.js

// Containers
const DefaultLayout = React.lazy(() => import('./containers/DefaultLayout'));
const DefaultOutLayout = React.lazy(() => import('./containers/DefaultOutLayout'));

// Pages
// const Login = React.lazy(() => import('./views/Pages/Login'));
// const Page404 = React.lazy(() => import('./views/Pages/Page404'));
// const Page500 = React.lazy(() => import('./views/Pages/Page500'));

class App extends Component {

  render() {
    return (
      <HashRouter>
          <React.Suspense fallback={loading()}>
            <Switch>

              <Route  path="/Home" name="Home" render={props => <DefaultLayout {...props}/>} />
              <Route  path="/" name="OutHome" render={props => <DefaultOutLayout {...props}/>} />
            </Switch>
          </React.Suspense>
      </HashRouter>
    );
  }
}

export default App;

import React from 'react';

const Breadcrumbs = React.lazy(() => import('./views/Base/Breadcrumbs'));
const Cards = React.lazy(() => import('./views/Base/Cards'));
const Carousels = React.lazy(() => import('./views/Base/Carousels'));

// https://github.com/ReactTraining/react-router/tree/master/packages/react-router-config
const routes = [
  { path: '/', exact: true, name: 'Home' },
  { path: '/dashboard', name: 'Dashboard', component: Dashboard },
  { path: '/PersonalInform', exact: true, name: 'PersonalInform', component: Colors },
  { path: '/theme/colors', name: 'Colors', component: Colors },
  { path: '/theme/typography', name: 'Typography', component: Typography },

];

export default routes;

routes

and

import React from 'react';

 const FastRegister = React.lazy(() => import('./views/Pages/FastRegister'));
 const Login = React.lazy(() => import('./views/Pages/Login'));
 const ForgetPassOrUsername = React.lazy(() => import('./views/Pages/ForgetPassOrUsername'));

// https://github.com/ReactTraining/react-router/tree/master/packages/react-router-config
const outroutes = [
  { path: '/', exact: true, name: 'OutHome' },
  { path: '/Login', name: 'Login', component: Login },
  { path: '/FastRegister', name: 'FastRegister', component: FastRegister },
];

export default outroutes;

outrouts.js

i really confused because i do up work but at end i cand load dashboard and just outroutes working but routes is not working

i want DefaultLayout.js render after DefaultOutLayout.js

or my first layout is DefaultOutLayout.js and after i login i want to render DefaultLayout.js

import React, { Component, Suspense } from 'react';
import { Redirect, Route, Switch } from 'react-router-dom';
import * as router from 'react-router-dom';
//import { Container } from 'reactstrap';

import {
  AppAside,
  AppHeader,
  AppFooter,
  AppSidebar,
  AppSidebarFooter,
  AppSidebarForm,
  AppSidebarHeader,
  AppSidebarMinimizer,
  // AppBreadcrumb2 as AppBreadcrumb,
  AppSidebarNav2 as AppSidebarNav,
} from '@coreui/react';
// sidebar nav config
import navigation from '../../_navlogin';
// routes config
import outroutes from '../../outroutes';
import MediaQuery from "react-responsive";
const DefaultOutHeader = React.lazy(() => import('./DefaultOutHeader'));
const DefaultOutAside = React.lazy(() => import('./DefaultOutAside'));
const DefaultOutFooter = React.lazy(() => import('./DefaultOutFooter'));
//const DefaultOutHeader = React.lazy(() => import('./DefaultOutHeader'));

class DefaultOutLayout extends Component {

  loading = () => <div className="animated fadeIn pt-1 text-center">لطفا شکیبا باشید...</div>

  signOut(e) {
    e.preventDefault()
    this.props.history.push('/login')
  }

  render() {
    return (
      <div className="app" >
        <MediaQuery query="( max-width: 700px)">
        <AppHeader >
          <Suspense fallback={this.loading()}>
            <DefaultOutHeader />
          </Suspense>
        </AppHeader>
        </MediaQuery>
        <div className="app-body" style={{ backgroundColor: '#fff' }} >

          <AppSidebar  display="lg" >
            <AppSidebarHeader>
              <img src={'../../assets/smstrez.png'} alt="admin@bootstrapmaster.com"
                style={{ width: '170px', height: '100px' }} />
            </AppSidebarHeader>
            <AppSidebarForm ></AppSidebarForm>
            <Suspense>
              <AppSidebarNav navConfig={navigation} {...this.props} router={router} ></AppSidebarNav>
            </Suspense>
            <AppSidebarFooter />
            <AppSidebarMinimizer style={{ backgroundColor: '#ffc107' }} />
          </AppSidebar>

          <main className="main">
            {/* <AppBreadcrumb appRoutes={outroutes} router={router} /> */}
            {/* <Container fluid> */}
            <Suspense fallback={this.loading()}>
              <Switch>
                {outroutes.map((route, idx) => {
                  return route.component ? (
                    <Route
                      key={idx}
                      path={route.path}
                      exact={route.exact}
                      name={route.name}
                      render={props => (
                        <route.component {...props} />
                      )} />
                  ) : (null);
                })}
                <Redirect from="/" to="/login" />
              </Switch>
            </Suspense>
            {/* </Container> */}
          </main>
          <AppAside fixed>
            <Suspense fallback={this.loading()}>
              <DefaultOutAside />
            </Suspense>
          </AppAside>
        </div>

        <AppFooter>
          <Suspense fallback={this.loading()}>
            <DefaultOutFooter />
          </Suspense>
        </AppFooter>
      </div>
    );
  }
}

export default DefaultOutLayout;

import React, { Component, Suspense } from 'react';
import { Redirect, Route, Switch } from 'react-router-dom';
import * as router from 'react-router-dom';
import { Container } from 'reactstrap';

import {
  AppAside,
  AppFooter,
  AppHeader,
  AppSidebar,
  AppSidebarFooter,
  AppSidebarForm,
  AppSidebarHeader,
  AppSidebarMinimizer,
  AppBreadcrumb2 as AppBreadcrumb,
  AppSidebarNav2 as AppSidebarNav,
} from '@coreui/react';
// sidebar nav config
import navigation from '../../_nav';
// routes config
import routes from '../../routes';

const DefaultAside = React.lazy(() => import('./DefaultAside'));
const DefaultFooter = React.lazy(() => import('./DefaultFooter'));
const DefaultHeader = React.lazy(() => import('./DefaultHeader'));

class DefaultLayout extends Component {

  loading = () => <div className="animated fadeIn pt-1 text-center">لطفا شکیبا باشید...</div>

  signOut(e) {
    e.preventDefault()
    // this.props.history.push('/login')
    window.location.href = "";
  }

  render() {
    return (
      <div className="app" >
        <AppHeader fixed   >
          <Suspense fallback={this.loading()}>
            <DefaultHeader onLogout={(e)=> this.signOut(e)} />
          </Suspense>
        </AppHeader>
        <div className="app-body" >
          <AppSidebar fixed display="lg">
            <AppSidebarHeader>
              {/* 
              <div className="mt-5 mb-5">

              </div> */}
            </AppSidebarHeader>
            <AppSidebarForm />
            <Suspense>
            <AppSidebarNav navConfig={navigation} {...this.props} router={router}/>
            </Suspense>
            <AppSidebarFooter />
            <AppSidebarMinimizer />
          </AppSidebar>

          <main className="main">
            <AppBreadcrumb appRoutes={routes} router={router}/>
            <Container fluid>
              <Suspense fallback={this.loading()}>

                <Switch>

                  {
                    routes.map((route, idx) => {
                    return route.component ? (
                      <Route
                        key={idx}
                        path={route.path}
                        exact={route.exact}
                        name={route.name}
                        render={props => (
                          <route.component {...props} />
                        )} />
                    ) : (null);
                  })}
                  <Redirect from="/login" to="/dashboard" />

                </Switch>
              </Suspense>
            </Container>
          </main>
          <AppAside fixed>
            <Suspense fallback={this.loading()}>
              <DefaultAside />
            </Suspense>
          </AppAside>
        </div>

        <AppFooter>
          <Suspense fallback={this.loading()}>
            <DefaultFooter />
          </Suspense>
        </AppFooter>
      </div>
    );
  }
}

export default DefaultLayout;

[christiantigre]

I have the same error, do you have the solution??

[karthiknmenon]

@christiantigre Create a new layout under Containers/,just like Default Layout and create two set of routes. One _newLayoutRoutes.js and newLayoutRoutes.js. Similar to _nav.js and routes.js.

[MoradiGit]

@mojojojo20 i dont underestand please explain more .. my problem is here this codes not working because each of routes just accept path="/" and dont working with path="/Home" `

          <Route  path="/Home" name="Home" render={props => <DefaultLayout {...props}/>} />
          <Route  path="/" name="OutHome" render={props => <DefaultOutLayout {...props}/>} />
        </Switch>`

[karthiknmenon]

@MoradiGit Have you updated your routes.js file ? Can you post the contents of your routes.js file here ?

[MoradiGit]

@mojojojo20 hi `const routes = [

{ path: '/', exact: true, name: 'home' }, { path: '/dashboard', name: 'dash', component: Dashboard },

/////////////////////////////////////

{ path: '/icons', exact: true, name: 'Icons', component: CoreUIIcons }, { path: '/icons/coreui-icons', name: 'CoreUI Icons', component: CoreUIIcons }, { path: '/icons/flags', name: 'Flags', component: Flags }, { path: '/icons/font-awesome', name: 'Font Awesome', component: FontAwesome }, { path: '/icons/simple-line-icons', name: 'Simple Line Icons', component: SimpleLineIcons },]`

this is my route

[woothu]

This is a routing issue. Please look up react-router and react-router-dom documentation.

[samrin786]

@MoradiGit I am also having the same issue I want two dashboard but I am not getting how to do it .if you have solved the issue please update the code here.

[edriv2010]

Why create submenu in navConfig?