From 349393e60b13369f3b2512c3b4d7550b0be0eec1 Mon Sep 17 00:00:00 2001
From: xidedix <xidedix@users.noreply.github.com>
Date: Thu, 16 May 2019 17:51:38 +0200
Subject: [PATCH] refactor: update to react router v5

###### 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_ :boom:
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}/>
     ```

---
---
 package.json                                  | 6 +++---
 src/containers/DefaultLayout/DefaultLayout.js | 9 +++++----
 2 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/package.json b/package.json
index e60fbc5..4df3b4c 100644
--- a/package.json
+++ b/package.json
@@ -15,7 +15,7 @@
     "@coreui/coreui": "^2.1.9",
     "@coreui/coreui-plugin-chartjs-custom-tooltips": "^1.3.0",
     "@coreui/icons": "0.3.0",
-    "@coreui/react": "~2.1.7",
+    "@coreui/react": "~2.5.0",
     "bootstrap": "^4.3.1",
     "chart.js": "^2.8.0",
     "classnames": "^2.2.6",
@@ -30,8 +30,8 @@
     "react-app-polyfill": "^1.0.1",
     "react-chartjs-2": "^2.7.6",
     "react-dom": "^16.8.6",
-    "react-router-config": "^4.4.0-beta.8",
-    "react-router-dom": "~4.3.1",
+    "react-router-config": "^5.0.0",
+    "react-router-dom": "^5.0.0",
     "react-test-renderer": "^16.8.6",
     "reactstrap": "^7.1.0",
     "simple-line-icons": "^2.4.1"
diff --git a/src/containers/DefaultLayout/DefaultLayout.js b/src/containers/DefaultLayout/DefaultLayout.js
index 72f3a4a..843c91f 100644
--- a/src/containers/DefaultLayout/DefaultLayout.js
+++ b/src/containers/DefaultLayout/DefaultLayout.js
@@ -1,10 +1,10 @@
 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,
-  AppBreadcrumb,
   AppFooter,
   AppHeader,
   AppSidebar,
@@ -12,7 +12,8 @@ import {
   AppSidebarForm,
   AppSidebarHeader,
   AppSidebarMinimizer,
-  AppSidebarNav,
+  AppBreadcrumb2 as AppBreadcrumb,
+  AppSidebarNav2 as AppSidebarNav,
 } from '@coreui/react';
 // sidebar nav config
 import navigation from '../../_nav';
@@ -45,13 +46,13 @@ class DefaultLayout extends Component {
             <AppSidebarHeader />
             <AppSidebarForm />
             <Suspense>
-            <AppSidebarNav navConfig={navigation} {...this.props} />
+            <AppSidebarNav navConfig={navigation} {...this.props} router={router}/>
             </Suspense>
             <AppSidebarFooter />
             <AppSidebarMinimizer />
           </AppSidebar>
           <main className="main">
-            <AppBreadcrumb appRoutes={routes}/>
+            <AppBreadcrumb appRoutes={routes} router={router}/>
             <Container fluid>
               <Suspense fallback={this.loading()}>
                 <Switch>