1.0.6 • Published 4 years ago
modul-ui-router v1.0.6
ui-router
Задача данной библиотеки реализовать возможность открытия слоев (страница поверх текущей) на странице при смене урла, но при этом фоновая страница остается без изменений. Пример http://joxi.ru/p27O8wnioGpkP2, страница списка товаров /, поверх нее открывается страница добавления/редактирования товара (слой) /product/:code
Пример конфига выглядит следующим образом
{
products: {
path: '/',
exact: true,
component: ProductListContainer,
nested: { //вложенные слои
product: {
path: '/product/:code',
exact: true,
isLayer: true, //true - будет открываться как слой
layout: ProductEdit //компонент который будет в слое
},
productModifier: {
path: '/product/modifier',
exact: true,
isLayer: true,
layout: ProductModifierContainer
}
}
},
exportProduct: {
path: '/products/export',
exact: true,
isLayer: true,
layout: ProductExportContainer
}
}
Пример внедрения
<UIRouter
defaultLayout={InternalLayout} - мастер страница
defaultLayerLayout={DefaultLayerLayout} - Вложенный слайдер страниц
notFound={NotFound} - слой "не найдено"
errorBoundary={ErrorBoundary} - DidCatch слой ошибки слоя
loadingComponent={LoadingComponent} - компонент ожидания загрузки при Lazy loading
routeWrappers={routeWrappers} - Hoc страницы (можно что нибудь проверить)
routes={routes} - правила для роутинга приложения
/>
Поддержка Lazy loading
Установить babel-plugin
npm install --save-dev @babel/plugin-syntax-dynamic-import
.babelrc
{
"plugins": ["syntax-dynamic-import"]
}
/source/...
// router.js
import { lazy } from "react";
export const getRoutes = () => ({
example: {
path: "/example",
exact: true,
component: lazy(() => import("./containers/ExampleContainer")),
nested: {
exampleEdit: "/example/edit",
exact: true,
isLayer: true,
layout: lazy(() => import("./containers/ExampleEditContainer"))
}
},
});
// AppComponent.js
import React, { Component } from "react";
import { withRouter } from "react-router";
import UIRouter from "modul-ui-router";
@withRouter
export default class AppComponent extends Component {
render() {
const { routes } = this.props;
return (
<UIRouter
{/* ... */}
errorBoundary={ErrorBoundary}
loadingComponent={LoadingComponent}
/>
);
}
}
Примеры файлов:
- ErrorBoundary => /srс/ErrorBoundary.js
- LoadingComponent => /srс/LoadingComponent.js
1.0.6
4 years ago
1.0.5
4 years ago
1.0.4-beta-add-gitlab-ci-8651eb21
4 years ago
1.0.4
4 years ago
1.0.3
5 years ago
1.0.2
5 years ago
1.0.1
5 years ago
1.0.0
5 years ago
0.0.9
6 years ago
0.0.8
6 years ago
0.0.7
6 years ago
0.0.6
7 years ago
0.0.5
7 years ago
0.0.4
7 years ago
0.0.3
7 years ago
0.0.2
7 years ago
0.0.1
7 years ago