OnsenUI Navigator + React 导航失败

Posted 2023-04-13

【中文标题】OnsenUI Navigator + React 导航失败

【英文标题】：OnsenUI Navigator + React failed to navigate

【发布时间】：2020-07-25 01:56:29

【问题描述】：

由于标题中提到的问题，我几天来一直在用头撞墙。我试图使用 Onsen UI 和 React 实现导航功能。但是，在我单击导航后，UI 导航到一个空白页面，然后立即返回到第一页。下面是我的代码。

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;

codeandbox 在这里可以玩：https://codesandbox.io/s/festive-lichterman-okme5?file=/src/App.js:0-828

如何克服？

【参考方案1】：

您的代码中的问题是您在导航器中呈现一个常量页面，而您必须呈现您传递的页面组件

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 Main( navigator, title, ...rest ) 
  return (
    <Page key=title>
      <SearchBar />
      Hello
      <Page className="custom_page_wrapper">
        <Button onClick=() => switchToEditorView(navigator)>
          Click to navigate
        </Button>
      </Page>
    </Page>
  );


function App() 
  return (
    <Navigator
      renderPage=(route, navigator) => (
        <route.component navigator=navigator ...route.props />
      )
      initialRoute= component: Main, props:  key: "firstPage"  
    />
  );

export default App;

Working demo