React Reference > RouterNavigator Component

<RouterNavigator />

This component is a variant of the Navigator with a declarative API. In order to manage to display the pages, the navigator needs to define the renderPage method, that takes an route and a navigator and converts it to an page.

Props

[improve this]
Name Type Description
renderPage func This function takes the current route object as a parameter and returns a react componen. Required.
routeConfig shape

This object must contain two properties: routeStack: An array of route objects, processStack: An array of process objects { type: push | pop | reset, route: userRoute } that describe the transition from the current state to the next state. Make sure that the route stack is not emptied before the animations for the processStack have completed. It is recommended to update the routeStack and empty the processStack in the ‘onPostPop’ callback.

Required.
onPrePush func Called just before a page is pushed. Optional.
onPostPush func Called just after a page is pushed. Optional.
onPrePop func Called just before a page is popped. Optional.
onPostPop func Called just after a page is popped. Optional.
string

Animation name. Available animations are "slide", "lift", "fade" and "none". These are platform based animations. For fixed animations, add "-ios" or "-md" suffix to the animation name. E.g. "lift-ios", "lift-md". Defaults values are "slide-ios" and "fade-md".

Optional.
animationOptions object Specify the animation’s duration, delay and timing. E.g. {duration: 0.2, delay: 0.4, timing: 'ease-in'}. Optional.
swipeable union Enables swipe-to-pop functionality for iOS. Optional.
swipePop func Function called on swipe-to-pop. Must perform a popPage with the given options object. Optional.
onDeviceBackButton func Custom handler for device back button. Optional.

Need Help?

If you have any questions, use our Community Forum or talk to us on Discord chat. The Onsen UI team and your peers in the community will work together to help solve your issues.

For bug reports and feature requests use our GitHub Issues page.