Skip to content

Commit 349393e

Browse files
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

File tree

2 files changed

+8
-7
lines changed

2 files changed

+8
-7
lines changed

package.json

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@
1515
"@coreui/coreui": "^2.1.9",
1616
"@coreui/coreui-plugin-chartjs-custom-tooltips": "^1.3.0",
1717
"@coreui/icons": "0.3.0",
18-
"@coreui/react": "~2.1.7",
18+
"@coreui/react": "~2.5.0",
1919
"bootstrap": "^4.3.1",
2020
"chart.js": "^2.8.0",
2121
"classnames": "^2.2.6",
@@ -30,8 +30,8 @@
3030
"react-app-polyfill": "^1.0.1",
3131
"react-chartjs-2": "^2.7.6",
3232
"react-dom": "^16.8.6",
33-
"react-router-config": "^4.4.0-beta.8",
34-
"react-router-dom": "~4.3.1",
33+
"react-router-config": "^5.0.0",
34+
"react-router-dom": "^5.0.0",
3535
"react-test-renderer": "^16.8.6",
3636
"reactstrap": "^7.1.0",
3737
"simple-line-icons": "^2.4.1"

src/containers/DefaultLayout/DefaultLayout.js

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,19 @@
11
import React, { Component, Suspense } from 'react';
22
import { Redirect, Route, Switch } from 'react-router-dom';
3+
import * as router from 'react-router-dom';
34
import { Container } from 'reactstrap';
45

56
import {
67
AppAside,
7-
AppBreadcrumb,
88
AppFooter,
99
AppHeader,
1010
AppSidebar,
1111
AppSidebarFooter,
1212
AppSidebarForm,
1313
AppSidebarHeader,
1414
AppSidebarMinimizer,
15-
AppSidebarNav,
15+
AppBreadcrumb2 as AppBreadcrumb,
16+
AppSidebarNav2 as AppSidebarNav,
1617
} from '@coreui/react';
1718
// sidebar nav config
1819
import navigation from '../../_nav';
@@ -45,13 +46,13 @@ class DefaultLayout extends Component {
4546
<AppSidebarHeader />
4647
<AppSidebarForm />
4748
<Suspense>
48-
<AppSidebarNav navConfig={navigation} {...this.props} />
49+
<AppSidebarNav navConfig={navigation} {...this.props} router={router}/>
4950
</Suspense>
5051
<AppSidebarFooter />
5152
<AppSidebarMinimizer />
5253
</AppSidebar>
5354
<main className="main">
54-
<AppBreadcrumb appRoutes={routes}/>
55+
<AppBreadcrumb appRoutes={routes} router={router}/>
5556
<Container fluid>
5657
<Suspense fallback={this.loading()}>
5758
<Switch>

0 commit comments

Comments
 (0)