React Reference > Navigator Component

<Navigator />

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.

Usage 

<Navigator
    renderPage={(route, navigator) =>
     <MyPage
       title={route.title}
       onPop={() => navigator.popPage()}
       />
    }
    initialRoute={{
        title: 'First Page'
    }} />
   }
 }

Props

Name Type Description
renderPage func This function takes the current route object as a parameter and returns a React component. 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 func
() => null 		Called just before a page is pushed. It gets an event object with route information. Optional.
onPostPush func
() => null 		Called just after a page is pushed. It gets an event object with route information. Optional.
onPrePop func
() => null 		Called just before a page is popped. It gets an event object with route information. Optional.
onPostPop func
() => null 		Called just after a page is popped. It gets an event object with route information. Optional.
animation 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 Optional function called on swipe-to-pop. If provided, must perform a popPage with the given options object. Optional.
onDeviceBackButton func Custom handler for device back button. Optional.

Methods

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

Resets the current page

Returns: Promise which resolves to the revealed page.

Parameters
Name Type Description
route Object The route that the page should be reset to.
options
resetPageStack(route, options = {}): Promise

Resets the navigator to the current page stack

Returns: Promise which resolves to the revealed page.

Parameters
Name Type Description
routes Array The routes that the navigator should be reset to.
options
pushPage(route, options = {}): Promise

Pushes a page to the page stack

Returns: Promise which resolves to the revealed page.

Parameters
Name Type Description
route Object The route that the navigator should push to.
options
popPage(options = {}): Promise

Pops a page out of the page stack

Returns: Promise which resolves to the revealed page.

Parameters
Name Type Description
options

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.