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}/>
```
---
This commit is contained in:
parent
5fcef7ed9e
commit
349393e60b
@ -15,7 +15,7 @@
|
|||||||
"@coreui/coreui": "^2.1.9",
|
"@coreui/coreui": "^2.1.9",
|
||||||
"@coreui/coreui-plugin-chartjs-custom-tooltips": "^1.3.0",
|
"@coreui/coreui-plugin-chartjs-custom-tooltips": "^1.3.0",
|
||||||
"@coreui/icons": "0.3.0",
|
"@coreui/icons": "0.3.0",
|
||||||
"@coreui/react": "~2.1.7",
|
"@coreui/react": "~2.5.0",
|
||||||
"bootstrap": "^4.3.1",
|
"bootstrap": "^4.3.1",
|
||||||
"chart.js": "^2.8.0",
|
"chart.js": "^2.8.0",
|
||||||
"classnames": "^2.2.6",
|
"classnames": "^2.2.6",
|
||||||
@ -30,8 +30,8 @@
|
|||||||
"react-app-polyfill": "^1.0.1",
|
"react-app-polyfill": "^1.0.1",
|
||||||
"react-chartjs-2": "^2.7.6",
|
"react-chartjs-2": "^2.7.6",
|
||||||
"react-dom": "^16.8.6",
|
"react-dom": "^16.8.6",
|
||||||
"react-router-config": "^4.4.0-beta.8",
|
"react-router-config": "^5.0.0",
|
||||||
"react-router-dom": "~4.3.1",
|
"react-router-dom": "^5.0.0",
|
||||||
"react-test-renderer": "^16.8.6",
|
"react-test-renderer": "^16.8.6",
|
||||||
"reactstrap": "^7.1.0",
|
"reactstrap": "^7.1.0",
|
||||||
"simple-line-icons": "^2.4.1"
|
"simple-line-icons": "^2.4.1"
|
||||||
|
@ -1,10 +1,10 @@
|
|||||||
import React, { Component, Suspense } from 'react';
|
import React, { Component, Suspense } from 'react';
|
||||||
import { Redirect, Route, Switch } from 'react-router-dom';
|
import { Redirect, Route, Switch } from 'react-router-dom';
|
||||||
|
import * as router from 'react-router-dom';
|
||||||
import { Container } from 'reactstrap';
|
import { Container } from 'reactstrap';
|
||||||
|
|
||||||
import {
|
import {
|
||||||
AppAside,
|
AppAside,
|
||||||
AppBreadcrumb,
|
|
||||||
AppFooter,
|
AppFooter,
|
||||||
AppHeader,
|
AppHeader,
|
||||||
AppSidebar,
|
AppSidebar,
|
||||||
@ -12,7 +12,8 @@ import {
|
|||||||
AppSidebarForm,
|
AppSidebarForm,
|
||||||
AppSidebarHeader,
|
AppSidebarHeader,
|
||||||
AppSidebarMinimizer,
|
AppSidebarMinimizer,
|
||||||
AppSidebarNav,
|
AppBreadcrumb2 as AppBreadcrumb,
|
||||||
|
AppSidebarNav2 as AppSidebarNav,
|
||||||
} from '@coreui/react';
|
} from '@coreui/react';
|
||||||
// sidebar nav config
|
// sidebar nav config
|
||||||
import navigation from '../../_nav';
|
import navigation from '../../_nav';
|
||||||
@ -45,13 +46,13 @@ class DefaultLayout extends Component {
|
|||||||
<AppSidebarHeader />
|
<AppSidebarHeader />
|
||||||
<AppSidebarForm />
|
<AppSidebarForm />
|
||||||
<Suspense>
|
<Suspense>
|
||||||
<AppSidebarNav navConfig={navigation} {...this.props} />
|
<AppSidebarNav navConfig={navigation} {...this.props} router={router}/>
|
||||||
</Suspense>
|
</Suspense>
|
||||||
<AppSidebarFooter />
|
<AppSidebarFooter />
|
||||||
<AppSidebarMinimizer />
|
<AppSidebarMinimizer />
|
||||||
</AppSidebar>
|
</AppSidebar>
|
||||||
<main className="main">
|
<main className="main">
|
||||||
<AppBreadcrumb appRoutes={routes}/>
|
<AppBreadcrumb appRoutes={routes} router={router}/>
|
||||||
<Container fluid>
|
<Container fluid>
|
||||||
<Suspense fallback={this.loading()}>
|
<Suspense fallback={this.loading()}>
|
||||||
<Switch>
|
<Switch>
|
||||||
|
Loading…
Reference in New Issue
Block a user