Enact
Edit on GitHub

ui/Routable

Utilities for working with routes.

import Routable from '@enact/ui/Routable';

Members

RoutableHigher-Order Component

A higher-order component that provides support for mapping Routes as children of a component which are selected via path instead of the usual flat array.

When using Routable you must specify the navigate config option.

import Routable from '@enact/ui/Routable';
Configuration
navigate •
String

The event to listen to for path changes.

This defines the actual name of the navigate property.

Properties added to wrapped component
path •
ArrayStringString

Path to the active panel.

May either be a URI-style path ('/app/home/settings') or an array of strings (['app', 'home', 'settings']).

navigate
Function

Called when navigating.

The event object is decorated to add path.

NOTE: The actual name of this property is configured in the HOC config.

RouteComponent

Used with ui/Routable.Routable to define the path segment and the component to render.

Route elements can be nested to build multiple level paths.

In the below example, Panels would render SettingsPanel with breadcrumbs to navigate AppPanel and HomePanel.

<Panels path="/app/home/settings" onSelectBreadcrumb={this.handleNavigate}>
	<Route path="app" component={AppPanel}>
		<Route path="home" component={HomePanel}>
			<Route path="settings" component={SettingsPanel} />
		</Route>
	</Route>
	<Route path="admin" component={AdminPanel} />
	<Route path="help" component={HelpPanel} />
</Panels>
import {Route} from '@enact/ui/Routable';
Properties
component •
StringComponent

The component to render when the path for this Route matches the path of the ui/Routable.Routable container.

path •
String

The name of the path segment.

ArrayBooleanFunctionModuleNumberObjectString