Remote SPA's Fixed component doesn't load

[Seansemble]

I am following this Remote SPA tutorial, and added a Fixed `AEMTitle` component to the AdventureDetail.js component below. 

/react-app/src/components/AdventureDetail.js

//...
<AEMTitle
pagePath={`/content/wknd-app/us/en/home/adventure/${adventureName}`}
itemPath='root/AdventureDetail_title'/>
//...

The AdventureDetail is rendered using this route. 

<Route path='/adventure:path'>
  <AdventureDetail />
</Route>

If I go to this route directly by entering the url via browser, it loads the `AEMTitle` component.

 

If I navigate to that page within the app, `AEMTitle` doesn't load.

As you can see, the AdventureDetail_title.model.env is not even called here.

 

I tried to apply the classic SPA routing per here, but I am not able to adapt it to the Remote SPA instance.

The `AEMResponsiveGrid` component works fine, but how can I make the Fixed components load on sub-pages?

Thanks,

[kautuk_sahni]

@Mohammed_Baseer @Avinash_Gupta_ @davidjgonzalezzzz @vikasbharti 

I kindly request your attention to this AEM question. Your expertise and guidance would be greatly appreciated. Thank you in advance for your support.