After adding <Splitter> menu, Back button is not showing up in next navigated Page
-
@jabidof Hmm, well definitely shows 2 pages and 2 routes, so, I don’t know. Apologies for not knowing more about react.
-
@munsterlander
Some news… I added a button in the toolbar whose action isonClick={() => navigator.popPage()}
Here is the result in the console:
I’m puzzled… This shows that there is a Navigator instance “somewhere” that is not the one I believe i’m using.
How can I further debug this?Thanks for any help.
J.
-
@munsterlander @Fran-Diox
I’m able to supply full code that shows the issue. The code is based on @argelius code https://github.com/argelius/react-onsenui-redux-weather
I made a tiny change by adding the side menu Splitter component and the above described behavior happens.It is now clear that there is a BUG in the REACT side menu Splitter component.
Would this help in the debug process?
Thanks
J.
-
@jabidof Yes, if you can post all your code or a github, I will take a look at it. Just understand, I am not a react guy so I can only really look at the Onsen bits.
-
@jabidof What’s the order of the routing components? I think the
Splitter
should be the parent ofNavigator
for this to work. Splitter > SplitterContent > Navigator. Is that correct?
-
in main index.js:
... render( <AppContainer> <Provider store={store}> <App /> </Provider> </AppContainer>, rootElement )) ...
in App.js:
... const renderPage = (route, navigator) => ( <route.component key={route.key} navigator={navigator} /> ); const App = () => ( <Navigator key='TOTO' renderPage={renderPage} initialRoute={{component: MainPage, key: 'MAIN_PAGE'}} /> ); ...
Finally the MainPage.js:
... const MainPage = ({navigator, splitterOpen, actions}) => ( <Splitter> <SplitterSide style={{ boxShadow: '0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23)' }} side='left' width={250} collapse={true} isSwipeable={true} isOpen={splitterOpen} onClose={() => actions.splitterSetClose()} onOpen={() => actions.splitterSetOpen()} > <Page> <List dataSource={[{title: 'Sign out', action: () => { console.log('sign out...'); }}] } renderRow={(menu) => ( <ListItem key={menu.title} onClick={menu.action} tappable>{menu.title}</ListItem> )} /> </Page> </SplitterSide> <SplitterContent> <Page renderToolbar={() => <NavBar title='Onsen Weather' navigator={navigator} />}> <LocationList navigator={navigator} /> <AddLocation /> </Page> </SplitterContent> </Splitter> ); ...
J.
-
I just tried this in App.js:
... const App = ({splitterOpen, actions}) => ( <Splitter> <SplitterSide style={{ boxShadow: '0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23)' }} side='left' width={250} collapse={true} isSwipeable={true} isOpen={splitterOpen} onClose={() => actions.splitterSetClose()} onOpen={() => actions.splitterSetOpen()} > <Page> <List dataSource={[{title: 'Sign out', action: () => { console.log('sign out...'); }}] } renderRow={(menu) => ( <ListItem key={menu.title} onClick={menu.action} tappable>{menu.title}</ListItem> )} /> </Page> </SplitterSide> <SplitterContent> <Navigator key='TOTO' renderPage={renderPage} initialRoute={{component: MainPage, key: 'MAIN_PAGE'}} /> </SplitterContent> </Splitter> ); ...
And the back button now appears.
I think this should be added to the doc.
I’ll update my own code later and let you know the outcome.
J.
-
@Fran-Diox @Onsen-UI
That was it! Thanks for the input!As I said, I spent few hours digging into this. I’d be happy for the community to find this info in the React DOC (which is already excellent!).
J.
-
@jabidof I supposed that could be the case. I mentioned this when writing the docs but perhaps it should be more extense:
Notice that loading new content in any of these frames will completely remove the previous loaded content. For more complex navigation consider nesting <ons-navigator> inside <ons-splitter-content>.
Basically, in your example your Navigator always has 1 child, the Splitter. You are changing the content of the Splitter but that does no affect the Navigator stack.
Glad it was helpful!
-
@Fran-Diox
I’m hitting some (maybe basic) issue. You mentioned before that the theSplitter
should be the parent ofNavigator
for this to work. But then, how can I pass the APPNavigator
instance to thePage
within theSplitterSide
component?Am I missing something simple?
J.