reactjs - React Ionic - 菜单如何访问路由器参数？

Question

我从 SideMenu Ionic App 开始。

我有一个主页，它从路线中获取“日期”道具

在左侧菜单中，我将放置一个日历，其中将突出显示路线中提供的日期。

如何继续访问菜单中的日期参数？

<IonApp>
        <IonReactRouter>
            <IonSplitPane contentId="main">

                <IonMenu contentId="main" date="????">
                </IonMenu>
                <IonPage id="main">
                    <IonContent>
                        <IonRouterOutlet>
                            <Route
                                path="/Organisation/:date?"
                                render={(props) => (
                                    <Organisation {...props} />
                                )}
                                exact={true}
                            />
                        </IonRouterOutlet>
                    </IonContent>
                </IonPage>
            </IonSplitPane>
        </IonReactRouter>
</IonApp>

我尝试了几种解决方案，但没有一种效果很好。哪个是最好的？

• 将所有内容放在 IonRouterOutlet 下方，即将 IonMenu 移动到组织组件内。我已经尝试过了，但左侧菜单在每次页面更改时消失 1 秒（重新加载？）。这不好。
• 将回调函数传递给将日期发送回 IonApp 组件的组织组件。我已经尝试过了，但它会产生无限循环
• 其他 ？

谢谢

标签： reactjsionic-framework

Answer 1

从 Ionic 提供的侧边菜单模板开始的最佳方法。

这是我在示例应用程序中的结构

      <IonApp>
        <>
          {authInfo?.loggedIn === true ? (
            <IonReactRouter>
              <IonSplitPane contentId="main">
                <Menu />
                <IonRouterOutlet id="main">
                  <Route path="/page/:name" component={Page} exact />
                  <Route path="/tabs" component={TabRootPage} />
                  <Redirect from="/" to="/tabs" exact />
                </IonRouterOutlet>
              </IonSplitPane>
            </IonReactRouter>
          ) : (
            <IonReactRouter>
              <Route
                path="/create-account"
                component={CreateAccountPage}
                exact
              />
              <Route path="/login" component={LoginPage} exact />
              <Redirect from="/" to="/login" exact />
            </IonReactRouter>
          )}
        </>
      </IonApp>

我正在使用反应上下文来存储一些状态信息，这些信息存储在我的AuthProvider

ReactDOM.render(
  <AuthProvider>
    <App />
  </AuthProvider>,
  document.getElementById("root")
);

然后，您可以从上下文中获取数据，Menu而无需传递参数。

示例：有关在 Ionic React 应用程序中管理状态的视频和博客

Context 提供了一种通过组件树传递数据的方法，而无需在每个级别手动传递 props。