IonReactRouter 不呈现 IonPage

Question

我是 ionic-react 框架的新手，到目前为止我很喜欢它。但现在我遇到了一个问题。当我使用 "IonReactRouter" 时，它说我的页面必须在 IonPage 组件内，尽管事实确实如此。我已经尝试删除复合 div 但仍然没有。任何帮助表示赞赏。 . .

Answer 1

我刚遇到同样的问题，但可以按如下方式解决。

根据Changelog 4.9.0-rc2, an IonPage should be the root page for Ionic Pages. Further, IonRouterOutlet must be the direct parent component of every IonPage, as it is explained in this comment。一个简单的示例可能如下所示。

const Home: React.FC = () =>
    <IonPage>
        <IonHeader>Home</IonHeader>
    </IonPage>

const Example: React.FC = () =>
    <IonPage>
        <IonHeader>Example</IonHeader>
    </IonPage>


const App: React.FC = () =>
    (
        <IonApp>
            <IonReactRouter>
                <IonRouterOutlet>
                    <Route path="/"        component={Home}   />
                    <Route path="/example" component={Example}/>
                </IonRouterOutlet>
            </IonReactRouter>
        </IonApp>
    );
export default App;

但是请注意，如果您使用 react-router guide 中所示的嵌套路由， div 将打破直接父子条件。该应用程序将路由到该组件，对其进行初始化，但只呈现一个空白页面。

因此请确保始终使用 IonRouterOutlet。

const Home: React.FC = () =>
    <IonPage>
        <IonHeader>Home</IonHeader>
        <IonContent>
            <Link to={'/example/simple'}>Simple</Link>
            <br/>
            <Link to={'/example/advanced'}>Advanced</Link>
        </IonContent>
    </IonPage>

const Example: React.FC<RouteComponentProps> = (route: RouteComponentProps) =>
    <IonRouterOutlet> 
        <Route path={`${route.match.url}/simple`} component={SimpleExample}/>
        <Route path={`${route.match.url}/advanced`} component={AdvancedExample}/>
    </IonRouterOutlet>

const SimpleExample: React.FC<RouteComponentProps> = (route: RouteComponentProps) =>
    <IonPage>
        <IonHeader>Simple</IonHeader>
    </IonPage>

const AdvancedExample: React.FC<RouteComponentProps> = (route: RouteComponentProps) =>
    <IonPage>
        <IonHeader>Advanced</IonHeader>
    </IonPage>

IonReactRouter 不呈现 IonPage

IonReactRouter not rendering IonPage

reactjs

react-router

ionic-react