<RouterNavigator />

This component is responsible for page transitioning and managing the pages of your OnsenUI application. 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.

Tutorial

Props

Name Type Default Value Description
renderPage function This function takes the current route object as a parameter and creates returns a react componen. Required.
initialRouteStack array

This array contains the initial routes from the navigator, which will be used to render the initial pages in the renderPage method.

Optional.
initialRoute object

This array contains the initial route of the navigator, which will be used to render the initial pages in the renderPage method.

Optional.
onPrePush function Called just before a page is pushed. Optional.
onPostPush function Called just after a page is pushed. Optional.
onPrePop function Called just before a page is popped. Optional.
onPostPop function 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 bool Enables swipe-to-pop functionality for iOS. Optional.
swipePop function Function called on swipe-to-pop. Must perform a popPage with the given options object. Optional.
onDeviceBackButton function Custom handler for device back button. Optional.

Methods Summary

Signature Description
resetPageStack(route, options = {}) Resets the navigator to the current page stack
pushPage(route, options = {}) Pushes a page to the page stack
popPage(route, options = {}) Pops a page out of the page stack

Discussion

Need Help?

If you have any questions, use our Community Forum or talk to us via Gitter 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.