• Onsen UI

    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.

    Click here to see the original article

  • Being a reference page for a Component, the information is incomplete. e.g. the Props section has no mention of pushPage and popPage functions.

  • @jackhung Thanks! We will add docs for the methods as well. Thanks for mentioning

  • Please refactor resetPage to resetToPage for make things equal to core.

  • @argelius , @munsterlander
    Is it possible to pass some props to component through navigator?
    For example:

                    component: login,
                    key: 'Login_Index',
                    role: role

    And access role with this.props.role.

  • @cyclops24 I am not a React user so my answer is with limited knowledge, but based on the docs, I would say it is not possible at this time. Hopefully, the team will come in and correct me! :)

  • Thanks @munsterlander for your attention. So I’m waiting for @argelius and other guys for reply.
    I think OnsenUI React version needs some more docs and example.

  • @cyclops24 It is:

                    component: login,
                    props: {
                        key: 'Login_Index',
                        role: role

  • @eknoes Thanks man. You save me.
    If you have time please see this other question too:

  • @eknoes: Really? Does this work? With OnsenUI2.0.3 and React-Onsen 1.0.3 this does not seem to work.

  • Is there a way to pop multiple pages? The methods I found online doesn’t work with React.

    I also tried resetPage, it sort of works. Here’s what I did:
    navigator.resetPage(pageA2); //A2 is component A with a different key.

    There are two major constraints with this method:

    1. the reseted page requires a unique key.
    2. onShow on pageA1 will be called (which I don’t really understand why). I ended up having onInit of A2 and onShow of A1 being called at the same time.

    What I really want to is to pop back to A1. I am surprised that there is no easy way to deal with this use case.

    Thanks for helping out!

  • The Onsen UI tutorial for React regarding the navigation via a side menu does no cover handling the click on a menu item. I do have a question about this part.

    Let’s say that I have an app with a side-menu. It is a tree structure; there is no shortcut from a lower level menu item (e.g. Item 1.1) to another lower level item (e.g. Item 2.1) from a different Menu.

    I am not making use of Redux by the way. In the App component I initialise the routing for the Root component. I am wondering which construct I should use to render the appropriate page given a click on a menu item (e.g. Menu item 2). Do you have any suggestions for me?

    Menu structure:

     |- Menu item 1
            |- Item 1.1
            |- Item 1.2
            |- ...
     |- Menu item 2
            |- Item 2.1
            |- Item 2.2
            |- ...
     |- ...

    Code for the Appcomponent (top-level component), the entry-point for the side-menu code:

    // App component
        renderPage={ this.renderPage }
        initialRoute={ { component: MenuRootPage, key: 'MENUROOT' } }

    The UI component for the side menu:

    const menuData = [ 
        { index: 1, title: "Menu item 1", component: "M1", icon: ... }, 
        { index: 2, title: "Menu item 2", component: "M2", icon: ... },
        { index: 3, title: "Menu item 3", component: "M3", icon: ... },
        { index: 4, title: "Menu item 4", component: "M4", icon: ... }
        dataSource={ menuData  }
        renderHeader={ () => <ListHeader>Menu</ListHeader> }
        renderRow={ ( data ) => {
                return <ListItem 
                        key={ `menuItem-${data.index}` } 
                        tappable >
                            icon={ data.icon } 
                        { `${data.title}` }

  • This took me way too long to figure out, and was helped by the people here
    Since Navigator takes an arbitrary route object, basically you pass the props you want to reach your page into the route object. But what if you determine the props at runtime? Pretty easy.

    //route object
    component: Page,
    title: ‘Some title’,
    anotherKey: 12345

    Implement your own version of pushPage() and add the props onto the route object:
    pushPage(route, navigator, props = {}){
    route.props = props;

    Then pass that object using the spread operator into the Page component:
    renderPage(route, navigator){
    const componentOptions = {
    key: route.title,
    renderToolbar: this.renderToolbar.bind(this, route, navigator),
    pushPage: this.pushPage.bind(this)
    return <route.component {…route.props} {…componentOptions} />;

    Hope it helps anyone else who needs to pass props through navigator!

  • There are several things that do not seem OK with this component:

    -> Where do we get back the passes as second parameter of the pushPage method?

    -> there should be all core ons-navigator component methods available on Navigator like: insertPage(index, page, [options]), removePage(index, [options]), resetToPage(page, [options]), bringPageTop(item, [options])

    -> What is the difference between Navigator and RouterNavigator? Their documentations are identical?!

    -> Ideally, it should be possible to make it work with the excellent react-router lib…

  • How would I get navigation working with React-Router? I need to make some protected routes but don’t know how to do that with the navigation of Onsen

  • @elad-karni: Now I’m getting an error "Navigator.pushPage not a function… I check and navigator is defined so what could be the issue?

Log in to reply