React Ioni c (v5): IonReactRouter & IonRouterOutlet не работает должным образом

Question

Я довольно новичок в React и Ioni c. Я пытаюсь создать «защищенный маршрут». Я создаю простой контекст с именем AuthContext:

import { createContext, Dispatch } from 'react';

/**
 * Context interface for AuthAuthentication/Authorization
 *
 * @property isAuthenticated
 * @property dispatch
 *
 * @interface
 */
interface AuthDefaultContext {
    isAuthenticated: boolean;
    dispatch: Dispatch<any>
}

/**
 * Authentication/Authorization context for managing
 * authenticating/ed and authorizing/ed users
 */
export const AuthContext = createContext<AuthDefaultContext>({
    isAuthenticated: false,
    dispatch: () => {}
});

и FunctionalComponent с именем ProtectedRoute:

interface ProtectedRouteProps {
    ProtectedComponent: FunctionComponent,
    routePath: string
}

export const ProtectedRoute: FunctionComponent<ProtectedRouteProps> = ({ ProtectedComponent, routePath }) => {

    useEffect(() => {
        console.log(`loading protected route '${routePath}' with component ${ProtectedComponent.name}`)
    }, [ProtectedComponent, routePath] );

    return (
        <AuthContext.Consumer>
            {
                ({ isAuthenticated }) => (
                    <Route path={ routePath } render={ () => isAuthenticated ? <ProtectedComponent/> : <Redirect to="/login" /> }/>
                )
            }
        </AuthContext.Consumer>
    );
}

В своем основном компоненте приложения я заключаю IonReactRouter в AuthContext.Provider вот так:

        <IonApp>
            <AuthContext.Provider value={{ isAuthenticated: authenticated, dispatch: dispatch }}>
                <IonReactRouter>
                    <IonRouterOutlet>
                        <Route path="/login" component={ Login } exact={ true } />
                        <ProtectedRoute routePath="/welcome" ProtectedComponent={ Welcome }/>
                        <ProtectedRoute routePath="/search" ProtectedComponent={ Dummy }/>
                    </IonRouterOutlet>
                </IonReactRouter>
            </AuthContext.Provider>
        </IonApp>

Проблема, с которой я столкнулся, заключается в том, что вышеописанное прекрасно работает для обычного Route и первого ProtectedRoute, но /search/ не работает. Путь uri изменяется в URL браузера на /search, но фиктивный компонент не отображается.

Я заметил, что если вы поменяете <IonReactRouter> & <IonRouterOutlet> примерно так:

            <IonRouterOutlet>
                <IonReactRouter>
                    .....
                </IonReactRouter>
            </IonRouterOutlet>

все маршруты будут работать, но вы потеряете эффект анимации, предоставляемый IonRouterOutlet. Документация по навигации на веб-сайте Ionics имеет IonReactRouter упаковку IonRouterOutlet, поэтому я предполагаю, что это правильная реализация.

Если я поменяю ProtectedRoute на стандартные реакции Route, все маршруты отлично работают с анимацией. Так что проблема должна быть в моей реализации компонента ProtectedRoute, я просто не могу понять это. Любая помощь будет наиболее ценной. Спасибо!

ОБНОВЛЕНИЕ:

Я до сих пор не нашел решения для этой проблемы, поэтому я удалил IonRouterOutlet, который, кажется, является причиной root. При этом все работает как положено. Я разместил этот вопрос на форуме Ioni c, поэтому, когда / если я получу ответ, я опубликую его здесь.

Спасибо,

Answer 1

IonRouterOutlet ожидает, что его дочерние элементы будут либо Routes, либо "Route like", что означает, что дочерние элементы должны иметь те же базовые c реквизиты, что и Route.

Итак, для вашего ProtectedRoute он должен работать, если вы переименуете свои входящие реквизиты routePath в path и ProtectedComponent в component.

Я собрал рабочий репозиторий, начиная с вашего кода здесь: https://github.com/elylucas/ionic-react-protected-route

Дайте мне знать, если это поможет.

Спасибо

Answer 2

Моя проблема заключалась в том, что некоторые страницы были вложены в повторно используемый компонент «BasicPage», что вызывало проблемы:

interface BasicPage extends RouteComponentProps {
  title: string;
  renderContent: any;
  history: any;
  hasMenu: boolean;
  backAction?: any;
}
/**
 * helper Ionic Page which laysout the framework of the page so
 * we dont need to repeat the boilerplate code. We also include
 * the router by default to help with page navigation
 */
const BasicPage: React.FC<BasicPage> = ({
  title,
  renderContent,
  history,
  hasMenu,
  backAction,
}) => {
  return (
    <>
      <IonHeader>
        <IonToolbar color="primary">
          <IonButtons slot="start">
            {hasMenu ? <IonMenuButton /> : null}
            {backAction ? <IonBackButton defaultHref="/" text="" /> : null}
          </IonButtons>
          <IonTitle>{title}</IonTitle>
        </IonToolbar>
      </IonHeader>
      <IonContent>{renderContent(history)}</IonContent>
    </>
  );
};

export default withRouter(BasicPage);

renderContent не отображал мою страницу. Я не понял, что является причиной этого, но сейчас я пытаюсь обойти эту проблему.