349393e60b
###### dependencies update
- update: `@coreui/react` to `~2.5.0`
- update: `react-router-config` to `^5.0.0`
- update: `react-router-dom` to `^5.0.0`
__BREAKING CHANGES__
- drop 'Breadcrumb' in favour of `Breadcrumb2`
- drop 'SidebarNav' in favour of `SidebarNav2`
- __Breadcrumb2__: **mandatory** prop `router` see > [Breadcrumb](./src/Breadcrumb.md)
- __SidebarNav2__: **mandatory** prop `router` see > [SidebarNav](./src/SidebarNav.md)
React Router v5 uses the new React Context API, which is incompatible with version used in 4.3.
That's a breaking change. With raw upgrade to v5, you can encounter an error message: `You should not render a <Route> outside a <Router>` or `You should not use <Link> outside a <Router>` etc... It means that Route, Link etc, can't find the correct context object because `Breadcrumb` and `SidebarNav` components have their own context object.
It's important to use the same instance of the `react-router-dom v5` library with template and coreui components. `@coreui/react` version `2.5.0` moves react-router-dom form dependencies to peerDependecies and takes the same library/module from the template/app instead. We have to pass router module object as a prop to `<AppSidebarNav>` and `<AppBreadcrumb>`
#####_migration guide v2.1 -> v2.5_ 💥
1. update `dependencies` in `package.json`
- [ ] `@coreui/react` to `~2.5.0`
- [ ] `react-router-dom` to `^5.0.0`
- [ ] `react-router-config` to `^5.0.0`
2. modify `DefaultLayout.js`
- [ ] import react-router-dom module as an object
```
import * as router from 'react-router-dom';
```
- [ ] import new versions of components `AppBreadcrumb2` and `AppSidebarNav2` (alias is optional, just keep consistency with markup)
```jsx
import {
...
AppBreadcrumb2 as AppBreadcrumb,
AppSidebarNav2 as AppSidebarNav
...
} from '@coreui/react';
```
- [ ] inject `router` object as a prop to `<AppSidebarNav>` and `<AppBreadcrumb>`
```html
<AppSidebarNav navConfig={navigation} {...this.props} router={router}/>
```
```html
<AppBreadcrumb appRoutes={routes} router={router}/>
```
---
93 lines
2.7 KiB
JavaScript
93 lines
2.7 KiB
JavaScript
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">Loading...</div>
|
|
|
|
signOut(e) {
|
|
e.preventDefault()
|
|
this.props.history.push('/login')
|
|
}
|
|
|
|
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 />
|
|
<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="/" 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;
|