react mui appbar missing on some page

Question

I am trying simple layout with react and react-router-dom:5.2.0 as

Header

• Homepage(mapped to path '/')
• Auth (mapped to path '/auth')
• Page1 (mapped to path 'path1/page1')

Footer

The header is rendered in HomePage('/') and Auth('/auth') as well. But on Page1('path1/page1'), only Page1 component is rendered without the Header. The footer is still rendered.

The source code is

function App() {
    return (
        <BrowserRouter>
            <StylesProvider generateClassName={generateClassName}>
                <div>
                    <Header />
                    <Suspense fallback={<Progress />}>
                        <Switch>
                            <Route path="/" exact component={Homepage} />
                            <Route path="/auth" render={props => (<Authpage {...props} /> )} />
                            <Route path="/path1/page1" render={(props) => (<Page1 {...props}/>)} />
                        </Switch>
                    </Suspense>
                    <Footer />
                </div>
            </StylesProvider>
        </BrowserRouter>
    );
}

export default App;

The header component is using with app bar

const Header = () => {
    return (
        <div>
            <AppBar position="static">
                <Toolbar>
                    <Typography variant="h6">
                        <Link to="/"><img src={"/assets/logo.png"} alt="Logo" className={classes.logo} /></Link>
                    </Typography>
                    <ShowAuth />
                    <ShowPage1 />
                </Toolbar>
            </AppBar>
        </div>
    );
};

export default Header;

Please let me know. I saw a similar question asked and following, I do have the Header outside the router. Not sure what is going wrong.

Answer 1

I faced this issue in react mfe where, the header, footer were all a remote application. For some reason the header is missing on some pages. Bringing the header as part of the shell (or the main container), made it work as expected. For now, the header is placed under this shell itself.