Navigation

    Monaca & Onsen UI
    • Login
    • Search
    • Tags
    • Users
    • Blog
    • Playground
    1. Home
    2. zn
    • Flag Profile
    • Profile
    • Following
    • Followers
    • Blocks
    • Topics
    • Posts
    • Best
    • Groups
    Save
    Saving

    zn

    @zn

    0
    Reputation
    1
    Posts
    133
    Profile views
    0
    Followers
    0
    Following
    Joined Last Online

    zn Follow

    Posts made by zn

    • 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;
      
      posted in Onsen UI
      zn