feat(Breadcrumb2, SidebarNav2): mandatory router prop

BREAKING CHANGE:
- inject `react-router-dom v5` to component
- usage
```
import * as router from 'react-router-dom';
...
<AppSidebarNav navConfig={navigation} {...this.props} router={router}/>
...
<AppBreadcrumb appRoutes={routes} router={router} />
```

Author: xidedix

src/Breadcrumb.md

@@ -1,3 +1,14 @@
 ### CoreUI `Breadcrumb` component
 
+usage in `DefaultLayout`:
+```jsx
+import * as router from 'react-router-dom';
+import { AppBreadcrumb2 as AppBreadcrumb } from '@coreui/react';
+// routes config
+import routes from '../../routes.js';
+```
+
+```html
+<AppBreadcrumb appRoutes={routes} router={router}></AppBreadcrumb>
+```
 _todo_

src/Breadcrumb2.js

@@ -0,0 +1,108 @@
+import React, { Component } from 'react';
+import { Breadcrumb, BreadcrumbItem } from 'reactstrap';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+
+let routes;
+let router;
+
+const getPaths = (pathname) => {
+  const paths = ['/'];
+
+  if (pathname === '/') return paths;
+
+  pathname.split('/').reduce((prev, curr) => {
+    const currPath = `${prev}/${curr}`;
+    paths.push(currPath);
+    return currPath;
+  });
+  return paths;
+};
+
+const findRouteName2 = (url) => {
+  const matchPath = router.matchPath;
+  const aroute = routes.find(route => matchPath(url, {path: route.path, exact: route.exact}));
+  return (aroute && aroute.name) ? aroute.name : null
+};
+
+const BreadcrumbsItem2 = ({ match }) => {
+  const routeName = findRouteName2(match.url);
+  const Link = router.Link;
+  if (routeName) {
+    return (
+      match.isExact ?
+        <BreadcrumbItem active>{routeName}</BreadcrumbItem>
+       :
+        <BreadcrumbItem>
+          <Link to={match.url || ''}>
+            {routeName}
+          </Link>
+        </BreadcrumbItem>
+    );
+  }
+  return null;
+};
+
+BreadcrumbsItem2.propTypes = {
+  match: PropTypes.shape({
+    url: PropTypes.string
+  })
+};
+
+const Breadcrumbs2 = (args) => {
+  const Route = router.Route;
+  const paths = getPaths(args.location.pathname);
+  const items = paths.map((path, i) => <Route key={i.toString()} path={path} component={BreadcrumbsItem2} />);
+  return (
+    <Breadcrumb>
+      {items}
+    </Breadcrumb>
+  );
+};
+
+const propTypes = {
+  children: PropTypes.node,
+  className: PropTypes.string,
+  appRoutes: PropTypes.any,
+  tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
+  router: PropTypes.any
+};
+
+const defaultProps = {
+  tag: 'div',
+  className: '',
+  appRoutes: [{ path: '/', exact: true, name: 'Home', component: null }]
+};
+
+class AppBreadcrumb2 extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = { routes: props.appRoutes };
+    routes = this.state.routes;
+    router = props.router;
+  }
+
+  render() {
+    const { className, tag: Tag, ...attributes } = this.props;
+
+    delete attributes.children
+    delete attributes.appRoutes
+    delete attributes.router
+
+    const classes = classNames(className);
+
+    const Route = router.Route;
+
+    return (
+      <Tag className={classes}>
+        <Route path="/:path" component={Breadcrumbs2} {...attributes} />
+      </Tag>
+    );
+  }
+}
+
+AppBreadcrumb2.propTypes = propTypes;
+AppBreadcrumb2.defaultProps = defaultProps;
+
+export default AppBreadcrumb2;

src/SidebarNav.md

@@ -1,34 +1,47 @@
 ### CoreUI `SidebarNav` subcomponent
+usage in `DefaultLayout`:
+```jsx
+import * as router from 'react-router-dom';
+import { AppSidebarNav2 as AppSidebarNav } from '@coreui/react';
+// sidebar nav config
+import navigation from '../../_nav';
+```
 
+```html
+<AppSidebarNav navConfig={navigation} {...this.props} router={ router }/>
+```
+props:
 
-prop | default
---- | ---
-children | `this.navList(navConfig.items)`
-className | `sidebar-nav`
-navConfig | `{ items: [ { name url icon badge } ] }`
-isOpen | `false`
-tag | `nav`
+prop | default | notes
+--- | --- | ---
+children | `this.navList(navConfig.items)` |
+className | `sidebar-nav` |
+navConfig | `{ items: [ { name url icon badge } ] }` |
+isOpen | `false` |
+tag | `nav` |
+router | inject `react-router-dom@5` object | _mandatory for @coreui/react ^2.5.0_  
 
-#### `navConfig` structure
+---
+#### `navConfig` shape
 
 - title:
-````js
+```json5
 {
   title: true,
   name: 'Theme',
-  class: ''              // optional class names space delimited list for title item ex: "text-center"
+  class: '',              // optional class names space delimited list for title item ex: "text-center"
   wrapper: {             // optional wrapper object
     element: '',         // optional* valid HTML5 element tag ( *required when passing attributes)
     attributes: {}       // optional valid JS object with JS API naming ex: { className: "my-class", style: { fontFamily: "Verdana" }, id: "my-id"}
   },
 },
-````
+```
 - item:
-````js
+```json5
 {
   name: 'Dashboard',
   url: '/dashboard',
-  icon: `icon-speedometer',
+  icon: 'icon-speedometer',
   class: '',                    // optional
   variant: 'success',           // optional
   badge: {
@@ -38,9 +51,9 @@ tag | `nav`
   },
   attributes: { target: '_blank', rel: "noreferrer noopener", disabled: false, hidden: false }, // (v2.1.0 up) optional valid JS object with JS API naming
 },
-````
+```
 - item with `children` array - works like `nav-dropdown-toggle` with `nav-dropdown-items`
-````js
+```json5
 {
   name: 'Icons',
   url: '/icons',
@@ -57,16 +70,16 @@ tag | `nav`
     },
   ]
 }
-````
+```
 - divider:
-````js
+```json5
 {
   divider: true
 },
-````
+```
 
 - order of precedence:
-````
+```
 title > divider > children > item
-````
+```