An example of the providers and wrapped functionality around a more complex app in a microfrontend Single-SPA application

MoreComplexApp.js

import React from 'react';
// ... all the other stuff our app uses, Redux Saga / custom providers / MUI components & themes / i18n


const App = ({ basename }) => {
  const { userContext } = getUserCtx();
  
  return (
    <BrowserRouter basename={basename}>
      <LocaleProvider>
        {locale => (
          <MuiThemeProvider theme={studentTheme}>
            <CssBaseline />
            <Provider store={store}>
              <IntlProvider locale={locale} messages={getLocaleFile(locale)}>
                <Routes userContext={userContext} />
              </IntlProvider>
            </Provider>
          </MuiThemeProvider>
        )}
      </LocaleProvider>
    </BrowserRouter>
  );
};

App.propTypes = {
  basename: PropTypes.string,
};

export default App;