Я новичок в реакции и в настоящее время разрабатываю приложение ionic4 / react / stencil.

Моя проблема заключается в следующем: я хочу иметь определенный заголовок для разных страниц моего приложения. Для этого я создал «NavigationService», который загружает текущую страницу.

экспортный класс NavigationService {

private pagesToDisplayWithMainHeader = ["app-project-gallery", "app-projects-gallery", "app-home", "app-documents"];

private currentPage : string;

public setCurrentPage(currentPage : string) : void{
    console.info("The current page is now : " + currentPage);
    this.currentPage = currentPage;
}

public whichIsTheHeaderToDisplay () : string{
    if (this.pagesToDisplayWithMainHeader.indexOf(this.currentPage)){
        console.info("Header is now: mainHeader");

        return "mainHeader";
    }

    else{
        console.info("Header is now: secondHeader");
        return "secondHeader";
    }
}

}

экспорт const NavigationServiceData = new NavigationService ();

Например, на своей домашней странице я инициализировал службу следующим образом:

constructor(){
NavigationServiceData.setCurrentPage("app-home");

}

Затем в моем компоненте заголовка приложения (который персонализирует заголовок) я получаю имя текущего приложения в службе.

if (NavigationServiceData.whichIsTheHeaderToDisplay () === "mainHeader") { возвращение (

Заголовок 1

        );
    }

    else {

        return (

            <h1>Header 2</h1>

        );

    }

Кажется, что мой композитный заголовок приложения не отображается. Должен ли я использовать состояние для моего объекта currentPage? В этом случае я не знаю, что делать дальше, потому что моя Служба не является родительским элементом моего заголовка приложения ...

Где я не прав?

заранее спасибо