Компонент Navigator из WordPress — это коллекция компонентов, предназначенная для создания иерархической навигации между экранами (или представлениями). Он позволяет создавать вложенные экраны (через компонент Navigator.Screen) и осуществлять навигацию между ними (с помощью компонентов Navigator.Button и Navigator.BackButton). Navigator отлично подходит для реализации сложных интерфейсов с вложенными структурами экранов.
Описание компонентов и их свойств
Компонент Navigator включает четыре ключевых компонента:
Navigator— контейнер и поставщик контекста, который управляет основной логикой скрытия и отображения экранов.Navigator.Screen— представляет отдельный экран, который отображается в зависимости от текущего пути.Navigator.Button— кнопка для перехода на другой экран.Navigator.BackButton— кнопка для возврата к родительскому экрану.
Navigator
Компонент Navigator служит оберткой для всех экранов и элементов навигации. Он содержит всю логику навигации, в том числе отслеживание текущего пути и управление фокусом между экранами.
Свойства Navigator
initialPath(string, обязательное)- Задает начальный путь, с которого начинается навигация.
- Например, для отображения начального экрана с путем
/homeзначениеinitialPathможет быть/home.
children(ReactNode, обязательное)- Дочерние элементы, которые будут отображаться внутри компонента
Navigator, такие какNavigator.Screenи другие.
- Дочерние элементы, которые будут отображаться внутри компонента
Navigator.Screen
Navigator.Screen представляет собой отдельный экран. Каждый экран должен иметь уникальный path, определяющий его расположение в иерархии навигации.
Свойства Navigator.Screen
path(string, обязательное)- Путь экрана, который используется для его идентификации. Путь должен иметь иерархическую структуру, подобную URL.
- Пример иерархии путей:
/— корневой путь./section/subsection— дочерний элемент для/section./section/:id— параметризованный путь, который также считается дочерним для/section.
children(ReactNode, обязательное)- Дочерние элементы, отображаемые на этом экране.
Navigator.Button
Компонент Navigator.Button представляет собой кнопку, которая позволяет пользователю перемещаться на другой экран, указанный в path.
Свойства Navigator.Button
path(string, обязательное)- Путь, на который будет осуществлен переход при нажатии на кнопку.
attributeName(string, необязательное)- HTML-атрибут, используемый для идентификации кнопки. Этот атрибут помогает
Navigatorвосстанавливать фокус при возвращении на экран. - По умолчанию:
id
- HTML-атрибут, используемый для идентификации кнопки. Этот атрибут помогает
children(ReactNode, необязательное)- Дочерние элементы кнопки, которые будут отображаться внутри нее (например, текст кнопки).
Navigator.BackButton
Navigator.BackButton — это кнопка для возврата на предыдущий (родительский) экран.
Свойства Navigator.BackButton
children(ReactNode, необязательное)- Дочерние элементы кнопки, которые будут отображаться внутри нее (например, текст кнопки «Назад»).
Пример использования компонентов Navigator
import { Navigator } from '@wordpress/components';
const MyNavigationExample = () => (
<Navigator initialPath="/">
<Navigator.Screen path="/">
<p>Это главный экран.</p>
<Navigator.Button path="/section">
Перейти к разделу
</Navigator.Button>
</Navigator.Screen>
<Navigator.Screen path="/section">
<p>Это раздел.</p>
<Navigator.Button path="/section/subsection">
Перейти к подразделу
</Navigator.Button>
<Navigator.BackButton>Назад на главный экран</Navigator.BackButton>
</Navigator.Screen>
<Navigator.Screen path="/section/subsection">
<p>Это подраздел.</p>
<Navigator.BackButton>Назад к разделу</Navigator.BackButton>
</Navigator.Screen>
</Navigator>
);
export default MyNavigationExample;
Иерархия путей и возврат на родительские экраны
Navigator предполагает, что экраны организованы в иерархии по пути (URL-подобная схема). Например, экран с путем /section/subsection является дочерним для /section. Компонент Navigator автоматически воспринимает действие «Назад» как возврат к родительскому экрану.
Пример пути:
/— корневой экран./profile— дочерний элемент для корня./profile/edit— дочерний элемент для/profile.
Если текущий экран находится на пути /profile/edit, то при нажатии на Navigator.BackButton навигация вернется к экрану /profile.
Рекомендуемые настройки высоты и анимации
Чтобы избежать резких изменений интерфейса при переходе между экранами, рекомендуется задавать фиксированную высоту для компонента Navigator. Это обеспечит более плавный переход и позволит избежать сдвигов контента.
Хук useNavigator
В дополнение к компонентам, Navigator предоставляет хук useNavigator для управления навигацией программно.
Свойства, доступные в useNavigator
goTo:(path: string, options?: NavigateOptions) => void- Функция для навигации к определенному пути. Опции навигации позволяют тонко настроить поведение перехода.
- Доступные опции:
focusTargetSelector(string): CSS-селектор для восстановления фокуса на элементе при возврате.isBack(boolean): Указывает, является ли переход обратным, что влияет на анимацию и восстановление фокуса.skipFocus(boolean): Отключает автоматическое управление фокусом, позволяя пользователю управлять фокусом вручную.
goBack:(options?: NavigateOptions) => void- Функция для возврата на родительский экран. Работает только при наличии иерархии путей. Если родительский экран не найден, функция пытается переместиться вверх по иерархии.
location- Объект, представляющий текущее местоположение. Имеет свойства:
path: текущий путь.isBack: указывает, был ли переход назад.isInitial: флаг, указывающий, что это начальная локация.params: объект с параметрами, извлеченными из пути (например,{ productId: '123' }для/product/:productId).
- Объект, представляющий текущее местоположение. Имеет свойства:
Пример использования useNavigator
import { Navigator, useNavigator } from '@wordpress/components';
const CustomScreen = () => {
const navigator = useNavigator();
const navigateToSubsection = () => {
navigator.goTo("/main/subsection", { focusTargetSelector: ".focus-target" });
};
return (
<Navigator.Screen path="/main">
<p>Это основной экран.</p>
<button onClick={navigateToSubsection}>Перейти к подразделу</button>
<Navigator.BackButton>Назад</Navigator.BackButton>
</Navigator.Screen>
);
};
const AppNavigation = () => (
<Navigator initialPath="/main">
<CustomScreen />
<Navigator.Screen path="/main/subsection">
<p>Это подраздел.</p>
<Navigator.BackButton>Назад к основному</Navigator.BackButton>
</Navigator.Screen>
</Navigator>
);
export default AppNavigation;
Заключение
Компонент Navigator позволяет создавать сложные интерфейсы с вложенными экранами и управляемой навигацией, поддерживающей иерархические пути и упрощенную настройку возврата на предыдущие экраны.