Monaca Onsen UI Discord Chat Github Repo

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;