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 :

    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 (
          renderPage={(route, navigator) => (
            <Page key={route.title}>
              <SearchBar />
              <Page className="custom_page_wrapper">
               <Button onClick={() => switchToEditorView(navigator)}>
                Click to navigate
          initialRoute={{ component: App, props: { key: "firstPage" } }}
    export default App;