OnsenUI导航器+ React导航失败

Question

bounty到期在6天内。该问题的答案有资格获得+ 50声望赏金。tnkh想要引起更多关注对此问题。

由于标题中提到的问题，我已经好几天没碰过墙了。我试图使用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;

codesandbox在这里可以和[https://codesandbox.io/s/festive-lichterman-okme5?file=/src/App.js:0-828]一起玩>

如何克服？

由于标题中提到的问题，我已经好几天没碰过墙了。我试图使用Onsen UI和React实现导航功能。但是，在单击导航后，...

Answer 1

代码中的问题是，您正在导航器中呈现恒定的页面，而您必须呈现所传递的页面组件，如