Commit 349393e
committed
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_ 💥
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}/>
```
---1 parent 5fcef7e commit 349393e
2 files changed
+8
-7
lines changed| Original file line number | Diff line number | Diff line change | |
|---|---|---|---|
| |||
15 | 15 | | |
16 | 16 | | |
17 | 17 | | |
18 | | - | |
| 18 | + | |
19 | 19 | | |
20 | 20 | | |
21 | 21 | | |
| |||
30 | 30 | | |
31 | 31 | | |
32 | 32 | | |
33 | | - | |
34 | | - | |
| 33 | + | |
| 34 | + | |
35 | 35 | | |
36 | 36 | | |
37 | 37 | | |
| |||
| Original file line number | Diff line number | Diff line change | |
|---|---|---|---|
| |||
1 | 1 | | |
2 | 2 | | |
| 3 | + | |
3 | 4 | | |
4 | 5 | | |
5 | 6 | | |
6 | 7 | | |
7 | | - | |
8 | 8 | | |
9 | 9 | | |
10 | 10 | | |
11 | 11 | | |
12 | 12 | | |
13 | 13 | | |
14 | 14 | | |
15 | | - | |
| 15 | + | |
| 16 | + | |
16 | 17 | | |
17 | 18 | | |
18 | 19 | | |
| |||
45 | 46 | | |
46 | 47 | | |
47 | 48 | | |
48 | | - | |
| 49 | + | |
49 | 50 | | |
50 | 51 | | |
51 | 52 | | |
52 | 53 | | |
53 | 54 | | |
54 | | - | |
| 55 | + | |
55 | 56 | | |
56 | 57 | | |
57 | 58 | | |
| |||
0 commit comments