#1257·reactxp

How to bring popups into the same context as the rest of the app?

Author: anchannCreated Feb 16, 2021Updated Mar 17, 2021

ReactXP seems to have this sort of top level component layout:

RootView
    MainViewContainer
        the top level component for your application goes here, e.g. <App/>
    PopupContainerView
        individual popups go here

My App has the following layout:

<BrowserRouter>
    ... actual content that depends on current route, etc ...
</BrowserRouter>

The BrowserRoute component (from react-router) internally uses react's context infrastructure to make routing/navigation primitives accessible to child components deep down the tree, without explicitly passing them around as props.

If I want to display a popup which has a link for navigating to a different route, the <Link> or any routing related component relies on being a descendent of the original <BrowserRouter> component which defines the shared context. With the ReactXP setup, however, popups are rendered outside of the <App>, and thus don't have access to the shared context established by <BrowserRouter>.

I tried to search for a way to wrap the whole RootView in a context, or somehow inject additional context into PopupContainerView, but could not find any APIs that would allow me to do this. What is the recommended way for handling this issue?

Thank you!