|
1 | 1 | ## [CoreUI](https://coreui.io/) for [react](./REACT.md) changelog
|
2 | 2 |
|
| 3 | +##### `v2.5.0` |
| 4 | +- **BREAKING CHANGE** release for use with: |
| 5 | + - react-router-dom `~5.0.0` |
| 6 | + - @coreui/react `~2.5.0` |
| 7 | + |
| 8 | +###### dependencies update |
| 9 | +- update: `@coreui/react` to `~2.5.0` |
| 10 | +- update: `react-router-config` to `^5.0.0` |
| 11 | +- update: `react-router-dom` to `^5.0.0` |
| 12 | + |
| 13 | +__BREAKING CHANGES__ :boom: |
| 14 | +- use React Router `v5` |
| 15 | +- drop 'Breadcrumb' in favour of `Breadcrumb2` |
| 16 | +- drop 'SidebarNav' in favour of `SidebarNav2` |
| 17 | +- __Breadcrumb2__: **mandatory** prop `router` 💥 see > [Breadcrumb](./src/Breadcrumb.md) |
| 18 | +- __SidebarNav2__: **mandatory** prop `router` 💥 see > [SidebarNav](./src/SidebarNav.md) |
| 19 | + |
| 20 | +React Router v5 uses the new React Context API, which is incompatible with version used in 4.3. |
| 21 | +That's a breaking change. With a 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. |
| 22 | + |
| 23 | +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>` |
| 24 | + |
| 25 | +#### _migration guide v2.1 -> v2.5_ :boom: |
| 26 | +1. update `dependencies` in `package.json` |
| 27 | + - [ ] `@coreui/react` to `~2.5.0` |
| 28 | + - [ ] `react-router-dom` to `^5.0.0` |
| 29 | + - [ ] `react-router-config` to `^5.0.0` |
| 30 | + |
| 31 | +2. modify `DefaultLayout.js` |
| 32 | + - [ ] import react-router-dom module as an object |
| 33 | + ``` |
| 34 | + import * as router from 'react-router-dom'; |
| 35 | + ``` |
| 36 | + - [ ] import new versions of components `AppBreadcrumb2` and `AppSidebarNav2` (alias is optional, just keep consistency with markup) |
| 37 | + ```jsx |
| 38 | + import { |
| 39 | + ... |
| 40 | + AppBreadcrumb2 as AppBreadcrumb, |
| 41 | + AppSidebarNav2 as AppSidebarNav |
| 42 | + ... |
| 43 | + } from '@coreui/react'; |
| 44 | + ``` |
| 45 | + - [ ] inject `router` object as a prop to `<AppSidebarNav>` and `<AppBreadcrumb>` |
| 46 | + ```html |
| 47 | + <AppSidebarNav navConfig={navigation} {...this.props} router={router}/> |
| 48 | + ``` |
| 49 | + |
| 50 | + ```html |
| 51 | + <AppBreadcrumb appRoutes={routes} router={router}/> |
| 52 | + ``` |
| 53 | +
|
| 54 | +--- |
| 55 | +
|
3 | 56 | ##### `v2.1.7`
|
4 | 57 | - maintenance release for use with:
|
5 | 58 | - react-router `v4.3.x`
|
|
0 commit comments