ModulUI/ui-router

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