OnsenUI Navigator + React failed to navigate
-
I have been banging my head against wall for days due to the issue as mentioned in the title. I was trying to implement navigation function using Onsen UI and React. However after I click to navigate, the UI navigates to a blank page, and immediately goes back to the first page. How to overcome it?
The codesandbox is here to play with : https://codesandbox.io/s/festive-lichterman-okme5?file=/src/App.js:0-828
This is my code :
import React from "react"; import { Page, Navigator, Button, SearchInput } from "react-onsenui"; function EditorView() { return <Page>This is the editor page!</Page>; } function SearchBar() { return <SearchInput placeholder="Search" />; } const switchToEditorView = navigator => { navigator.pushPage({ component: EditorView, props: { key: "editorPage" } }); }; function App() { return ( <Navigator renderPage={(route, navigator) => ( <Page key={route.title}> <SearchBar /> <Page className="custom_page_wrapper"> <Button onClick={() => switchToEditorView(navigator)}> Click to navigate </Button> </Page> </Page> )} initialRoute={{ component: App, props: { key: "firstPage" } }} /> ); } export default App;