React Ioni c - Как меню может получить доступ к параметру роутера? - PullRequest
Новая
       7

React Ioni c - Как меню может получить доступ к параметру роутера?

0 голосов
/ 27 мая 2020

Я начинаю с приложения SideMenu Ioni c.

У меня есть главная страница, которая принимает реквизиты «даты» из маршрута

В левом меню я помещаю календарь в котором будет выделена дата, указанная в маршруте.

Как я могу перейти к доступу к параметру даты в моем меню? 

<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 внутри компонента Organization. Я пробовал это, но левое меню исчезает 1 se c при каждой смене страницы (перезагружается?). Это неприятно.
  • передача функции обратного вызова компоненту Organization, которая отправит дату обратно компоненту IonApp. Я пробовал это, но он генерирует бесконечные циклы
  • другое?

Спасибо

Ответы [ 2 ]

1 голос
/ 27 мая 2020

лучший подход, чтобы начать с шаблона бокового меню, который Ioni c предоставляет.

вот как я структурировал его в моем примере приложения 

      <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, и вам не нужно передавать параметры.

примеры: Видео и блог об управлении состоянием в Ioni c React Applications

Контекст обеспечивает способ передачи данных через дерево компонентов без необходимости передавать реквизиты вниз вручную на каждом уровне.

0 голосов
/ 27 мая 2020

IonReactRouter использует React Router под капотом, поэтому обязательно обратитесь к их документации, чтобы узнать больше.

Вы можете получить доступ к параметрам URL где угодно в пределах <IonReactRouter/> через useParams хук.
- https://reacttraining.com/react-router/web/api/Hooks/useparams

Добавьте его прямо в определение вашего <IonMenu/> компонента 

const IonMenu = () => {
  let { date } = useParams(); // here is your date

  return <>...</>
}

Используйте этот хук везде, где вам нужны параметры. Таким образом вы избегаете бурения опор , ie. необходимость передавать реквизит в отдаленные места.

...