Navigator

[cyclops24]

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.

[eknoes]

@cyclops24 It is:

navigator.pushPage({
                component: login,
                props: {
                    key: 'Login_Index',
                    role: role
                }
            });

[cyclops24]

@eknoes Thanks man. You save me.
If you have time please see this other question too:
https://community.onsen.io/topic/1009/manage-splitterside-for-use-it-as-reusable-component

[wasedaigo]

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

[Xiyuan Liu]

Is there a way to pop multiple pages? The methods I found online doesn’t work with React. http://codepen.io/onsen/pen/Exqze

I also tried resetPage, it sort of works. Here’s what I did:
navigator.push(pageA1);
navigator.push(pageB1);
navigator.push(pageC1);
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!

[JanvB]

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:

MenuRoot
 |- 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
<Navigator
	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: ... }
]; 

...
	
<List
	dataSource={ menuData  }
	renderHeader={ () => <ListHeader>Menu</ListHeader> }
	renderRow={ ( data ) => {
			return <ListItem 
					key={ `menuItem-${data.index}` } 
					modifier='longdivider' 
					tappable >
					<Icon
						icon={ data.icon } 
						size="50px" 
						fixed-width="true"
					/>
					{ `${data.title}` }
				</ListItem>
			}
		}
	/>

[camboio]

This took me way too long to figure out, and was helped by the people here https://github.com/OnsenUI/OnsenUI/issues/1547
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;
navigator.pushPage(route);
}

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),
navigator,
pushPage: this.pushPage.bind(this)
}
return <route.component {…route.props} {…componentOptions} />;
}

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

svdoever created this issue in OnsenUI/OnsenUI

closed Documentation OnsenUI is way below par #1547

[zabojad]

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

-> Where do we get back the options.data 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…

[Elad Karni]

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]

@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?