Роутинг

Стероиды позволяют задать единое дерево роутов всего проекта, которое можно считать картой сайта.

В проекте, как правило, дерево задается в файле routes/index.ts, где корневым роутом root является главная страница (как правило, с адресом /), а ветви дерева задаются через items. Каждая страница описывается объектом с интерфейсом IRouteItem.

Задав такое дерево, вы получаете сразу несколько преимуществ:

• Можно создавать ссылки по ID роута: <Link toRoute='root'>...</Link>'.
• Можно выбрать ветвь дерева роутов и отрендерить по нему навигацию: <Nav items='profile'/>.
• Лейблы ссылок и заголовки страниц будут браться из описанного дерева роутов.
• Относительный путь до страниц – url, описывается только в дереве роутов, его легко изменять без рефакторинга проекта.
• Разработчик может наглядно увидеть всю карту проекта, просто открыв дерево роутов.
• У роутов можно указывать роли – roles, для ограничения доступа к странице по ролям пользователей.

Пример дерера роутов из трех страниц - главной и страниц профиля:

import IndexPage from './IndexPage';
1import ProfileGeneral from './ProfileGeneral';
2import ProfileSettings from './ProfileSettings';
3import {IRouteItem} from '@steroidsjs/core/ui/nav/Router/Router';
4
5export const ROUTE_ROOT = 'root';
6export const ROUTE_PROFILE = 'profile';
7export const ROUTE_PROFILE_GENERAL = 'profile_general';
8export const ROUTE_PROFILE_SETTINGS = 'profile_settings';
9
10export default {
11    id: ROUTE_ROOT,
12    exact: true,
13    path: '/',
14    label: __('Главная страница'),
15    component: IndexPage,
16    roles: [null, 'user'], // могут видеть гости и авторизованные пользователи
17    items: {
18        [ROUTE_PROFILE]: {
19            label: __('Профиль'),
20            path: '/profile',
21            redirectTo: true,
22            roles: ['user'], // могут видеть только авторизованные пользователи
23            items: {
24                [ROUTE_PROFILE_GENERAL]: {
25                    label: __('Основная информация'),
26                    path: '/general', // указываем только часть пути, остальное добавится от родителя
27                    component: ProfileGeneral,
28                    // тут роли не указываем, они наследуются от родителя
29                },
30                [ROUTE_PROFILE_SETTINGS]: {
31                    label: __('Настройки'),
32                    path: '/settings',
33                    component: ProfileSettings,
34                },
35            },
36        },
37    },
38} as IRouteItem;

Относительные и абсолютные пути

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

Например:

// src/routes/index.ts
1import {IRouteItem} from '@steroidsjs/core/ui/nav/Router/Router';
2import IndexPage from './IndexPage';
3import LoginPage from './LoginPage';
4import SignUpPage from './SignUpPage';
5
6export const ROUTE_ROOT = 'root';
7
8const roles = [null];
9
10export default {
11    id: ROUTE_ROOT,
12    exact: true,
13    path: '/',
14    component: IndexPage,
15    roles,
16    items: {
17        auth: {
18            exact: true,
19            path: '/auth',
20            roles,
21            items: {
22                login: {
23                    exact: true,
24                    path: '/login', 
25                    roles,
26                    component: LoginPage,
27                }, // LoginPage будет доступен по URL /auth/login
28                signUp: {
29                    exact: true,
30                    path: '/sign-up',
31                    roles,
32                    component: SignUpPage
33                } // SignUpPage будет доступен по URL /auth/sign-up
34            }
35        }
36    }
37} as IRouteItem;

Чтобы использовать дерево роутов с указанием абсолютных путей, нужно добавить в файле Application.tsx флаг alwaysAppendParentRoutePath для routerProps:

// src/Application.tsx
1import useApplication from '@steroidsjs/core/hooks/useApplication';
2
3export default function Application() {
4    const {renderApplication} = useApplication({
5        routerProps: {
6            alwaysAppendParentRoutePath: false, // укажем флаг для использования абсолютных путей 
7        },
8        /* ... */
9    });
10
11    return renderApplication();
12}

Тогда, для доступа к страницам авторизации и регистрации по тем же URL, что и в предыдущем примере будет необходимо исправить структуру дерева роутов на:

// src/routes/index.ts
1import {IRouteItem} from '@steroidsjs/core/ui/nav/Router/Router';
2import IndexPage from './IndexPage';
3import LoginPage from './LoginPage';
4import SignUpPage from './SignUpPage';
5
6export const ROUTE_ROOT = 'root';
7
8const roles = [null];
9
10export default {
11    id: ROUTE_ROOT,
12    exact: true,
13    path: '/',
14    component: IndexPage,
15    roles,
16    items: {
17        auth: {
18            exact: true,
19            path: '/auth',
20            roles,
21            items: {
22                login: {
23                    exact: true,
24                    path: '/auth/login', // Указываем абсолютный путь
25                    roles,
26                    component: LoginPage,
27                }, // LoginPage будет доступен по URL /auth/login
28                signUp: {
29                    exact: true,
30                    path: '/auth/sign-up', // Указываем абсолютный путь
31                    roles,
32                    component: SignUpPage
33                } // SignUpPage будет доступен по URL /auth/sign-up
34            }
35        }
36    }
37} as IRouteItem;

Настройки роута

Параметры path, exact - передаются напрямую в React Router. Их описание можно посмотреть в официальной документации React Router.

Название и лейбл

Для каждого роута можно указать label и title. Приложение само может распоряжаться по какой логике использовать один или другой, но изначально смысл заложен такой - label используется для названия ссылок, а title - для заголовка страниц (а если не задан - используется label).

Отображение ссылок в дереве навигации

Бывают ситуации, когда не нужно отображать ссылку или кнопку в навигации для перехода на роут. Например, если нужно добавить роут для настроек профиля, но не добавлять его в навигацию. Для таких случаев удобно использовать параметр isNavVisible, в значении false.

Модифицируем дерево роутов так, чтобы путь /settings не был виден в навигации:

/* ... */
1
2export default {
3    id: ROUTE_ROOT,
4    exact: true,
5    path: '/',
6    label: __('Главная страница'),
7    component: IndexPage,
8    roles: [null, 'user'],
9    items: {
10        [ROUTE_PROFILE]: {
11            /* ... */
12            items: {
13                /* ... */
14                [ROUTE_PROFILE_SETTINGS]: {
15                    label: __('Настройки'),
16                    path: '/settings',
17                    component: ProfileSettings,
18                    isNavVisible: false, // скроем роут из навигации
19                },
20            },
21        },
22    },
23} as IRouteItem;

Редирект

Для автоматического редиректа роута на страницу, необходимо задать свойство redirectTo, в котором указывается path до страницы.

Например:

// src/routes/index.ts
1import {IRouteItem} from '@steroidsjs/core/ui/nav/Router/Router';
2import IndexPage from './IndexPage';
3import LoginPage from './LoginPage';
4import SignUpPage from './SignUpPage';
5
6export const ROUTE_ROOT = 'root';
7
8const roles = [null];
9
10export default {
11    id: ROUTE_ROOT,
12    exact: true,
13    path: '/',
14    component: IndexPage,
15    roles,
16    items: {
17        auth: {
18            exact: true,
19            path: '/auth',
20            roles,
21            redirectTo: '/auth/login', // Указываем ссылку, на которую пользователь автоматически будет перенаправлен при попытке доступа к /auth
22            items: {
23                login: {
24                    exact: true,
25                    path: '/login', 
26                    roles,
27                    component: LoginPage,
28                },
29                signUp: {
30                    exact: true,
31                    path: '/sign-up',
32                    roles,
33                    component: SignUpPage
34                }
35            }
36        }
37    }
38} as IRouteItem;

Часто бывает, что необходимо сделать редирект на дочернюю страницу раздела. Например, как в предыдущем примере, чтобы /auth перенаправлял на /auth/login, где login - одна из дочерних страниц ветви auth. В таком случае можно задать redirectTo в true, чтобы редирект был сделан на первую дочернюю страницу.

// src/routes/index.ts
1import {IRouteItem} from '@steroidsjs/core/ui/nav/Router/Router';
2import IndexPage from './IndexPage';
3import LoginPage from './LoginPage';
4import SignUpPage from './SignUpPage';
5
6export const ROUTE_ROOT = 'root';
7
8const roles = [null];
9
10export default {
11    id: ROUTE_ROOT,
12    exact: true,
13    path: '/',
14    component: IndexPage,
15    roles,
16    items: {
17        auth: {
18            exact: true,
19            path: '/auth',
20            roles,
21            redirectTo: true, // Обратите внимание, не обязательно указывать ссылку, если необходимо перенаправить на первый роут из items
22            items: {
23                login: {
24                    exact: true,
25                    path: '/login', 
26                    roles,
27                    component: LoginPage,
28                },
29                signUp: {
30                    exact: true,
31                    path: '/sign-up',
32                    roles,
33                    component: SignUpPage
34                }
35            }
36        }
37    }
38} as IRouteItem;