Router

import { router, navigate } from "@dpg.gg/application";

Overview

Router добавляет функционал обработки схемы при определенном url благодаря библиотеке @dpg.gg/router и предоставляет актуальный стор с информацией о текущем роуте.

Middleware

Данная функция расширяет обработчик схемы, чтобы реализовать обработку Router и Page элементов в SchemaElement.

{
	"element": "Router",
	"children": [
		{ "element": "Page", "path": "/", "file": "/pages/home.json" },
		{ "element": "Page", "path": "/blog", "file": "/pages/blog.json" },
		{ "element": "Page", "path": "/blog/:id", "file": "/pages/blog-post.json" },
		{
			"element": "Page",
			"path": "/user/:id",
			"children": ["User Profile for: ", "{{$router.params.id}}"]
		}
	]
}

Router

• SchemaElement

Является обязательным родителем для всех Page элементов. Указывается в качестве аттрибута element.

В children передается массив из SchemaElement с Page

{
	"element": "Router", 
	"children": [
		{ "element": "Page", "path": "/", "file": "/pages/home.json" }
		//...
	]
}

Page

• SchemaElement

Компонент который позволяет загружать схемы из других источников благодаря аттрибуту file или отрисовывать children элементы только при совпадении url с path выражением.

Указывается в качестве аттрибута element.

WARNING

В родителях обзательно должен быть компонент Router

{
	"element": "Router",
	"children": [
		{ "element": "Page", "path": "/", "file": "/pages/home.json" } 
		//...
	]
}

path ^required

• Type: string | Regex

Этот аттрибут принимает строку или регулярное выражение, которое используется для сопоставления url и поиска актуальной страницы

{
	"element": "Page",
	"path": "/blog/:id", 
	"file": "/pages/blog-post.json"
}

file ^optional

• Type: string

Аттрибут в котором пеердается ссылка на внешнюю схему, котора будет загружена через Loader.

{
	"element": "Page",
	"path": "/blog/:id",
	"file": "/pages/blog-post.json"
}

WARNING

Если указан file аттрибут, то содержимое children не будет обработано

children ^optional

• Array<SchemaItem>

Принимает схему которая будет отрисована при совпадении path

{
	"element": "Page",
	"path": "/blog/:id",
	"children": ["Blog Page for: ", "{{$router.params.id}}"] 
}

router

Store с актуальным значением Route.

Позволяет так же выполнить навигацию благодаря вызову события navigate

router.emit("navigate", "/path/to/page");

navigate()

• Arg: path: string ^required
• Arg: replace: boolean ^optional

Программная навигация внутри приложения, принимает 2 аргумента, путь на который необходимо перейти и опциональный флаг который не создает в истории запись о переходе.

navigate("/page-2"); // appends a history entry
navigate("/page-3", true); // replaces the current history entry

TIP

Функция эквивалентна route в preact-router