reactjs - IonReactRouter 不渲染 IonPage

Question

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

Answer 1

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

根据Changelog 4.9.0-rc2，IonPage 应该是 Ionic Pages 的根页面。此外，IonRouterOutlet必须是每个 IonPage 的直接父组件，正如本评论中所解释的那样。一个简单的示例可能如下所示。

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 指南中所示的嵌套路由，则 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>