ui/Routable

Utilities for working with routes.

Members

Routable Higher-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.

Configuration

Required Property • navigate

String

The event to listen to for path changes.

This defines the actual name of the ui/Routableui/Routable.Routable.navigate property.

Properties added to wrapped component

Required Property • path

StringArray(String)

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.

Link Component

A component that is used to make a link to navigate among ui/Routableui/Routable.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>
  );
};

Extends: ui/Routableui/Routable.LinkBase
Wrapped with: ui/Routableui/Routable.Linkable

Properties

Required Property • path

String

The path to navigate that matches the path of the ui/Routableui/Routable.Routable container.

disabled

Boolean

Applies a disabled style and the control becomes non-interactive.

LinkBase Component

A base component that is used to make a link.

Linkable Higher-Order Component

A higher-order component adds support to a component to handle navigate from ui/Routableui/Routable.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 ui/Routableui/Routable.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>
);

Route Component

Used with ui/Routableui/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>

Properties

Required Property • component

StringComponent

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

Required Property • path

String

The name of the path segment.