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
Properties added to wrapped component
Path to the active panel.
May either be a URI-style path (
'/app/home/settings'
) or an array of strings (['app', 'home', 'settings']
).
LinkComponent
A component that is used to make a link to navigate among Route components.
In the following example, Sample
would render Main
with two Links for About
and FAQ
.
If About
is clicked, the content of About
would be displayed under Main
.
Example:
const Views = Routable({navigate: 'onNavigate'}, ({children}) => <div>{children}</div>);
const Main = () => (
<div>
<Link path="./about">About</Link>
<Link path="./faq">FAQ</Link>
</div>
);
const About = () => (<div>Greetings! We are Enact team.</div>);
const Faq = () => (<div>List of FAQ</div>);
const Sample = (props) => {
// use 'main' for the default path
const [path, nav] = useState('main');
// if onNavigate is called with a new path, update the state
const handleNavigate = useCallback((ev) => nav(ev.path), [nav]);
return (
<Views {...props} path={path} onNavigate={handleNavigate}>
<Route path="main" component={Main}>
<Route path="about" component={About} />
<Route path="faq" component={Faq} />
</Route>
</Views>
);
};
import {Link} from '@enact/ui/Routable';
Properties
The
path
to navigate that matches the path of the ui/Routable.Routable container.Applies a disabled style and the control becomes non-interactive.
LinkBaseComponent
A base component that is used to make a link.
import {LinkBase} from '@enact/ui/Routable';
LinkableHigher-Order Component
A higher-order component adds support to a component to handle navigate
from Routable.
It has configuration placed in the first argument to define which event will be used to navigate.
onClick
event is used by default. Thus, if you don't configure it, the component should forward onClick
event
to make Routable know when navigation is triggered.
Example:
const CustomItemBase = kind({
name: 'CustomItem',
handlers: {
onClick: handle(
forward('onClick')
)
},
render: ({...rest}) => {
return (
<div {...rest} />
);
}
});
const CustomItem = Linkable({navigate: 'onClick'}, CustomItemBase);
// same as const CustomItem = Linkable(CustomItemBase);
const Main = () => (
<div>
<CustomItem path="./about">About</CustomItem>
<CustomItem path="./faq">FAQ</CustomItem>
</div>
);
import {Linkable} from '@enact/ui/Routable';
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
.
Example:
<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
The component to render when the
path
for this Route matches the path of the ui/Routable.Routable container.The name of the path segment.