Support multiple React apps

[ondrejvelisek]

Hi there,

imagine situation where developer uses more react apps.

ReactDOM.render(<ComponentA/>, document.getElementById('rootA'));
ReactDOM.render(<ComponentB/>, document.getElementById('rootB'));
ReactDOM.render(<ComponentC/>, document.getElementById('rootC'));

Eg. while gradually migrating project from some legacy component framework to React. Going from leaf components (single React apps) gradually merging them into bigger and bigger ones untill whole app is migrated. (our case but believe it is a common approach)

We encounter a problem, that multiple React Routers (<HashRouter/>) does not share some context.

const ComponentA = () => <HashRouter><AppA></HashRouter>
const ComponentB = () => <HashRouter><AppB></HashRouter>
const ComponentC = () => <HashRouter><AppC></HashRouter>

e.g. navigate from useNavigate called from <AppA/> does not trigger rerenders in <AppB/> and <AppC/> via useMatch and <Route/>.

I was suprised by this behaviour (using RR v6). I thought that anything I do via react-router will manipulate Browser page state, it triggers some global callback which all HashRouters are listening to internally and triggers its rerenders. Am I wrong?

Anyway. Is there a way to obtain such behaviour in react-router?

Lastly I will point out, that other libraries solves this by some shared context configuration. Examples:

react-query

const queryClient = new QueryClient(...); // single shared context
const ComponentA = () => <QueryClientProvider client={queryClient}><AppA></QueryClientProvider>
const ComponentB = () => <QueryClientProvider client={queryClient}><AppB></QueryClientProvider>
const ComponentC = () => <QueryClientProvider client={queryClient}><AppC></QueryClientProvider>

react-redux

const store = createStore(...); // single shared context
const ComponentA = () => <ReduxProvider store={store}><AppA></ReduxProvider>
const ComponentB = () => <ReduxProvider store={store}><AppB></ReduxProvider>
const ComponentC = () => <ReduxProvider store={store}><AppC></ReduxProvider>

okta-react

const oktaAuth = new OktaAuth(...); // single shared context
const ComponentA = () => <Security oktaAuth={oktaAuth}><AppA></Security>
const ComponentB = () => <Security oktaAuth={oktaAuth}><AppB></Security>
const ComponentC = () => <Security oktaAuth={oktaAuth}><AppC></Security>

Sorry if missunderstood something and thank you for constructive discussion and answers. :)